تنظیم focus روی input پس از رندر کامپوننت

چطور می تونم پس از رندر یک کامپوننت فوکوس را روی input تنظیم کنم؟

در Documentation مربوط به React خواندم که  می توان با تنظیم ref=nameInput مربوط به input field در تابع render و فراخوانی:

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

این کار را انجام داد. اما کجا باید این کد را فراخوانی کنم؟ چند جا امتحان کردم اما نتیجه نگرفتم.

0
مسعود پرسیده شده در ۲۲ اسفند ۱۳۹۷
16 سوال
0 پاسخ
4امتیاز
Share in:
1 پاسخ

باید در متد componentDidMount که یکی از متدهای Lifecycle می باشد این کار را انجام دهید مانند نمونه کد زیر:

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>

 

1
دانیال
پاسخ داده در ۲۶ اسفند ۱۳۹۷
0 سوال
50 پاسخ
27امتیاز
پاسخ شماپاسخ شما با موفقیت ثبت شد.پاسخی وارد نشده است.

ارسال پاسخ