12
0

روش React برای تنظیم فوکوس روی یک فیلد متنی خاص بعد از رندر شدن کامپوننت چیه؟

مستندات پیشنهاد می‌کنه که از refs استفاده کنی، مثلاً:

در تابع رندر، "ref="nameInput رو روی فیلد ورودیم تنظیم کردم و بعد:

this.refs.nameInput.getInputDOMNode().focus();

اما کجا باید اینو صدا بزنم؟ چندین جا رو امتحان کردم ولی کار نمیکنه

0

باید این کار رو در componentDidMount و کال‌بک refs انجام بدی. چیزی شبیه به این:

componentDidMount(){
   this.nameInput.focus(); 
}
class App extends React.Component{
  componentDidMount(){
    this.nameInput.focus();
  }
  render() {
    return(
      <div>
        <input 
          defaultValue="Won't focus" 
        />
        <input 
          ref={(input) => { this.nameInput = input; }} 
          defaultValue="will focus"
        />
      </div>
    );
  }
}
    
ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<div id="app"></div>
ارسال پاسخ به سوال بالا

برای ارسال پاسخ باید وارد اکانتت بشی

اگر پاسخت شامل تکه کدی میشه، از منوی ویرایشگر پایین، تکه کدی که نوشتی رو انتخاب کن و بعد از طریق زبان کدی که نوشتی رو انتخاب کن تا کدت داخل بلاک مخصوص زبان خودش قرار بگیره و کدت خواناتر برای بقیه نشون داده بشه

اگه پاسخت رفرنسی داره، لینک رفرنس رو هم بذار تا پاسختت کاملتر و معتبر تر بشه