兄弟または遠くに関連するReactコンポーネントで入力フォーカスを処理する

Question

A 
|-B 
| |-C 
| |-D 
| 
|-E 
    |-input 

コンポーネントDは、コンポーネントツリーの別のより深い分岐にコンポーネントEとしてあります。特定のアクションがD私は入力に焦点を当てたいと思います。refを使用して入力にグローバル参照を格納する必要がありますか、またはサガを使用して離れた要素間でドキュメントフォーカスを制御するためのより良いアプローチがありますか？状態

2として

1）「A」店「isEInputFocused」）「A」は持っている -

Answer 1

これは、正確な詳細を知らなくてもちょっとアドホックようだが、ここで私はそれを達成する方法を説明します上記の状態値（オン/オフ）を切り替えて、この機能を "E"でフォーカス/ブラーを引き起こしたい他のコンポーネントに下に渡します。例えば。

state = { 
    isEFocused: false, 
}; 

toggleEFocus() { 
    this.setState({ isEFocused: !this.state.isEFocused }); 
} 

render() { 
    <div> 
     <D toggleEFocused={ ::this.toggleEFocus } /> 
     <E isEFocused={ this.state.isEFocused } /> 
    </div> 
} 

（二重コロンは、正しく「A」の状態にアクセスできるようにする機能を結合することである）

3）「E」が、次に「A」から小道具としてこれを受信します。また、 "E" のcomponentWillReceivePropsには、前述のpropに基づいてトリガー入力フォーカスが設定されています。ここで、 "D" は、特定のアクションが発生した場合、単に ""

から受け継がれる toggleEFocus（）をトリガに

componentWillReceiveProps(nextProps) { 
    if (nextProps.isEFocused) this._inputRef.focus(); 
    else this._inputRef.blur(); 
    // this._inputRef is the ref to the input in E 
} 

4）