Fokus auf Eingabe, wenn auf DIV geklickt wird

Question

Mit React versuche ich, auf ein Eingabeelement zu fokussieren, wenn bestimmte Schaltflächen/Elemente angeklickt werden. Ich brauche die Fähigkeit, den Fokus nach dem Rendern mehrmals zu wechseln.

Zum Beispiel, wenn ich auf eine Schaltfläche Name klicken, sollte der Name Eingabefeld Fokus. Wenn ich auf die Adressschaltfläche klicke, sollte das Adresseingabefeld den Fokus haben.

Ich bin vertraut, dies mit jQuery tun, aber es scheint nicht wie erwartet mit React.js zu verhalten.

EDIT:

Ich versuche, eine Taste zu verwenden, um ein Menü zu öffnen. Wenn das Menü geöffnet wird, sollte der Fokus automatisch auf einem Eingabefeld liegen.

Ich habe versucht, die folgenden:

willFocus(name) { 
    if(name==='nameButton') { 
    oDocument.getElementById('nameInput').focus(); 
} 

• das Label/für die semantische Verwendung. (Funktioniert nicht, da das Etikett nicht die gleiche Form wie der Eingang hat.)

Answer 1

Verwenden Sie label. Kein Javascript erforderlich.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Answer 2

Eine sehr einfache Art und Weise ist ein <label> Element zu verwenden:

<div> 
<label for='input1'>Click here</label> 
<input type='text' id='input1' /> 
</div> 
<div> 
<label for='input2'>Click here</label> 
<input type='text' id='input2' /> 
</div> 
<div> 
<label for='input3'>Click here</label> 
<input type='text' id='input3' /> 
</div> 

Arbeitsbeispiel: https://jsfiddle.net/kq3okzas/

Answer 3

Sie The ref Callback Attribute nutzen könnten. ein Beispiel eines Eingangs unter:

render() { 
    // Use the `ref` callback to store a reference to the text input DOM 
    // element in this.textInput. 
    return (
    <div> 
     <input 
     type="text" 
     ref={(input) => { this.textInput = input }} 
     /> 
     ... 
    </div> 
) 
} 

Dann Sie in der Lage sind explizit konzentrieren die Eingabe von:

this.textInput.focus(); 

Answer 4

ein ref Feld an den Eingang Erstellen Sie in der Lage sein wollen, Fokus anwenden . Ich habe es textInput genannt. Ich habe hier Syntax ES6 verwendet.

Jetzt haben Sie einen Verweis auf den Knoten und können jetzt von überall in der Komponente auf das Eingabeelement zugreifen.

Um den Fokus in diesem Eingangselement anzuwenden, ist ebenso einfach wie this.textInput.focus()

eine Funktion erstellen, die die Fokusmethode zum Knoten verwiesen wird gelten.

handleMenuClick() { 
    this.textInput.focus() 
} 

Jetzt können Sie diese Funktion aufrufen, wenn jemand auf die Menütaste zum Beispiel klickt

<div 
onClick={this.handleMenuClick.bind(this)} 
> I AM MENU TITLE </div>