mohamad etedadi
5 سال پیش توسط mohamad etedadi مطرح شد
3 پاسخ

از بین رفتن 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 همچنان رو اینپوت دوم بمونم.


ثبت پرسش جدید
علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 5 سال پیش مطرح شد
0

درود..
اگر اینپوتی که همیشه روش 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>
    );
  }
}

mohamad etedadi
@etedadi74 5 سال پیش مطرح شد
0

هدف من این نیست که همیشه روی یه اینپوت focus کنم من میخوام قبل از setState رو هر اینپوتی بوده بعد از setState هم رو همون باشه.


علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 5 سال پیش مطرح شد
0

مراحلی که باید انجام بدید می‌تونه به شکل زیر باشه:

  • برای اینپوت هات ref بذار..
  • arrow function ی که روی onClick گذاشتی رو به یه متد تبدیل کن..
  • داخل این متد قبل از استفاده از setState ، المانی که focus روشه رو پیدا کن
  • ref اون المان رو همراه اِستیت ها به setState پاس بده
  • در متد componentDidUpdate اون ref که توی اِستیت هست رو بگیر
  • با استفاده از متد ()focus روی المان مورد نظر focus کن

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام