Verwendung von „this“ in JS

Question

Ich verstehe nicht, wie funktioniert this Werke in den folgenden Code (aus einem Tutorial Reagieren extrahiert):

class Connect extends React.Component { 
    myFunc = event => { 
     console.log(this.pseudoInput); 
    } 
    render() { 
     return (
      <div > 
       <form onSubmit={(e) => this.myFunc(e)} > 
        <input type="text" placeholder="Pseudo" required ref={(input) => { this.pseudoInput = input }} /> 
        <button type="submit">Submit</button> 
       </form> 
      </div> 
     ) 
    } 
} 

Wenn ich gut verstehen, bezieht sich this auf das übergeordnete Objekt (Ist das übergeordnete Objekt hier eingegeben?). Aber dieses übergeordnete Objekt hat keine pseudoInput Eigenschaft. Also verstehe ich nicht, dass es benutzt wird. Kannst du mir sagen, wo ich falsch liege? Vielen Dank

Answer 1

In Reaktion verwenden wir ref, um Referenzen auf Komponenten zu erstellen. Wie Sie im obigen Code sehen können, wird ein Verweis für die Eingabe erstellt.

ref={(input) => { this.pseudoInput = input }}

this.pseudoInput einen Verweis auf die Eingabe von Namen pseudoInput erzeugen, wie es auf die aktuelle Klasse zuweisen. Und damit console.log(this.pseudoInput); bezieht sich auf die Eingabekomponente

Answer 2

Variablen müssen nicht explizit in einem JS-Objekt definiert oder initialisiert werden. Der obige Code ist ungefähr der gleiche wie der folgende:

var test = {}; 
test.variableName = 'some value'; 
console.log(test.variableName); //outputs 'some value'