Wie Fokus über eine Hierarchie setzen in

Question

Reagieren

In meinem Reagieren Chat-Anwendung habe ich eine Hierarchie von Komponenten wie folgt aus:

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

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

Was ich will, ist, dass, wenn ich die ReplyButton drücken, sollte Fokus eingestellt werden die Eingabe in der NewReply-Komponente. Kann mir jemand erklären, wie ich das in React erreichen kann? Ich habe Beispiele gesehen, bei denen die Komponente, die den Fokus setzt, ein unmittelbares Elternteil der Eingabe ist, aber nicht in einem anderen Teil der Hierarchie.

Danke, Frank

Answer 1

Versuchen Sie focus() am Eingang Aufruf?

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

Answer 2

Sie werden auf dem Click-Ereignis an die Mutter Reply Komponente passieren müssen und dann von dort den Fokus-Funktion aufrufen. Sie müssen also auch auf diese Funktion, um von Reply Komponente zu jeder dieses Kind bis ReplyButton Komponente

Somthing wie

Antworten

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

ReplyMenu

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

ReplyButton

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