از بین رفتن focus اینپوت فعلی
<Input placeholder="Basic usage" key="1" />
<Input placeholder="Basic usage" key="2" />
<Input placeholder="Basic usage" key="3" />
<button onClick={()=>{ this.setState({})} }></button>مطابق کد بالا ما سه تا اینپوت داریم.حالا وقتی رو اینپوت دوم focus میکنیم و روی button کلیک میکنیم.دستور setState اجرا میشه .focus از اینپوت دوم برداشته میشه و میره رو اینپوت اول.ولی من میخوام بعد از setstate همچنان رو اینپوت دوم بمونم.
پاسخها
3
درود..
اگر اینپوتی که همیشه روش focus میشه ثابت هست، میتونه به شکل زیر روش focus کنی و نیازی به js نیست
<input type="text" autofocus/>اما اگر بخواهی از طریق js اینکارو بکنی، باید از طریق متد componentDidMount و ref ها اینکارو انجام بدی..
به اینپوتی که قراره روش focus بشه یه ref اختصاص بده و در متد componentDidMount و یا componentDidUpdate روی اون 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>
);
}
}
هدف من این نیست که همیشه روی یه اینپوت focus کنم من میخوام قبل از setState رو هر اینپوتی بوده بعد از setState هم رو همون باشه.
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
مراحلی که باید انجام بدید میتونه به شکل زیر باشه:
- برای اینپوت هات ref بذار..
- arrow function ی که روی onClick گذاشتی رو به یه متد تبدیل کن..
- داخل این متد قبل از استفاده از setState ، المانی که focus روشه رو پیدا کن
- ref اون المان رو همراه اِستیت ها به setState پاس بده
- در متد componentDidUpdate اون ref که توی اِستیت هست رو بگیر
- با استفاده از متد ()focus روی المان مورد نظر focus کن