تنظیم focus روی input پس از رندر کامپوننت
چطور می تونم پس از رندر یک کامپوننت فوکوس را روی input تنظیم کنم؟
در Documentation مربوط به React خواندم که می توان با تنظیم ref=nameInput مربوط به input field در تابع render و فراخوانی:
this.refs.nameInput.getInputDOMNode().focus();
این کار را انجام داد. اما کجا باید این کد را فراخوانی کنم؟ چند جا امتحان کردم اما نتیجه نگرفتم.
ثبت نظر
باید در متد 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>
پاسخ شماپاسخ شما با موفقیت ثبت شد.پاسخی وارد نشده است.