از بین رفتن focus اینپوت فعلی

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