`ref`によって呼び出されたinput.focus（）は` onBlur`イベントを呼び出す

Question

私はonFocus、onBlur、およびrefのコールバックを設定したいReactにinput要素を持っています。 refコールバックを設定すると、input.focus()を内部で実行すると、onBlurイベントが発生するという望ましくない動作が発生します。

<input 
    onFocus={() => { 
     props.startSearch(); // set props.active === true 
    }} 
    onBlur={() => { 
     props.endSearch(); // set props.active === false 
    }} 
    ref={(input) => { 
     if (input && props.active) { 
      input.focus(); 
     } 
    }} 
/> 

私は、アクション設定props.activeをtrueにディスパッチする別のコンポーネントを持っています。これは、入力コンポーネントに焦点を当てるべきです。しかし、部品のマウント、予期せず入力のonBlurコールバック火災時に：

ref => onFocus => onBlur

は、これはtrueにprops.activeを設定しているが、その後すぐに、それは偽（props.endSearch火災ので）を設定します。

私がinput.focus()をコメントアウトし、手動で入力をフォーカスするには、onFocus => refが必要です。しかし、これは明らかに入力を「自動焦点合わせ」する効果はありません。

---

なぜinput.focus()は火にonBlurをトリガされ、どのように私はこれを防ぐことができますか？

Answer 1

autoFocusを試してみてください。同様に：

<input ref="searchBox" onFocus={props.startSearch} onBlur={props.endSearch} autoFocus={props.active} /> 

編集：

また、あなたのcomponentDidUpdateで行う（上記更新refに注意してください）：あなたが希望する動作があることを意味

if (this.props.active) { 
    this.refs.searchBox.focus(); 
}