私はこのようなコンポーネントの階層を持っている私のリアクトチャット・アプリケーションで

Question

を反応させるのに階層間でフォーカスを設定する方法：

ThreadList 
    Thread 
     Reply 
      ReplyMenu 
       ReplyButton 
        <button onClick="?" /> 

     Reply 
     Reply 
     . 
     NewReply 
      <input ref={(input) => {this.replyInput = input}}> 

私が欲しいのは、私がReplyButtonを押したときに、フォーカスに設定されなければならないということですNewReplyコンポーネント内の入力。誰でも私にReactでこれを達成する方法を説明することはできますか？フォーカスを設定するコンポーネントが入力の直接の親であるが、階層の別の部分ではない例を見てきました。

おかげで、 フランク

Answer 1

あなたが入力にfocus()を呼び出してみましたか？

render(){ 
    const _this = this; 
    <button onClick={() => _this.replyInput.focus()} /> 
} 

Answer 2

あなたは親Replyコンポーネントにクリックイベントに渡し、そこからフォーカス機能を呼び出す必要があります。だから、あなたも

focusNewReply() { 
    this.props.focusNewReply(); 
} 

ReplyMenu

返信

focusNewReply() { 
    this.replyInput.focus(); 
} 

ようReplyButtonコンポーネント

気にいらまでReplyコンポーネントからこの子のそれぞれに、この関数に渡す必要があります

ReplyButton

<button onClick={()=>{this.props.focusNewReply()}}>