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

コンポーネント E としてコンポーネント ツリーの別のより深いブランチにあるコンポーネント D があります。特定のアクションが D (またはスタック内の任意の場所) で発生した場合、E に入力を集中させたいと考えています。何らかの方法で入力へのグローバル参照を保存するrefか、サガを使用して離れた要素間でドキュメントのフォーカスを制御するためのより良い方法がありますか?

4

1 に答える 1

0

これは、正確な詳細を知らずにその場しのぎのように思えますが、これを達成する方法は次のとおりです-

1) "A" は "isEInputFocused" を状態として格納します。

2）「A」には、上記の状態値（オン/オフ）を切り替える機能があり、「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 に基づいて入力フォーカスをトリガーします。

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

4) "D" では、特定のアクションが発生したときに、"A" から渡されたtoggleEFocus()をトリガーするだけです

于 2016-05-04T23:57:02.457 に答える