So verwenden Sie React-Komponentenreferenzen

Dieses Mal zeige ich Ihnen, wie Sie React-Komponentenreferenzen verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von React-Komponentenreferenzen gelten. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

ref Wie der Name schon sagt, wissen wir, dass es tatsächlich als Referenz auf eine Komponente oder auch als Bezeichner angesehen werden kann. Als Attribut einer Komponente kann ihr Attributwert ein String oder eine Funktion sein.

Eigentlich ist die Verwendung von ref nicht notwendig. Selbst in den Anwendungsszenarien ist dies nicht erforderlich, da die mit ref implementierten Funktionen auch in andere Methoden konvertiert werden können. Da ref jedoch seine anwendbaren Szenarien hat, bedeutet dies, dass ref seine eigenen Vorteile hat. Zu diesem und den anwendbaren Szenarien von ref heißt es in der offiziellen Dokumentation:

Nachdem Sie die UI-Struktur von der Render-Methode zurückgegeben haben, möchten Sie möglicherweise aus den Einschränkungen des virtuellen React-DOM ausbrechen und die Komponenteninstanz verwenden zurückgegeben von render Rufen Sie bestimmte Methoden auf. Im Allgemeinen ist dies für den Datenfluss in der Anwendung nicht erforderlich, da der reaktive Datenfluss immer sicherstellt, dass die neuesten Requisiten an jede untergeordnete Ausgabe von render() übergeben werden. Es gibt jedoch immer noch mehrere Szenarien, in denen die Verwendung dieses Ansatzes notwendig oder vorteilhaft ist: Finden des DOM-Markups der gerenderten Komponente (das als DOM-Identifikations-ID betrachtet werden kann), Verwenden von React-Komponenten in einer großen Nicht-React-Anwendung oder Konvertieren Ihrer Vorhandenen Code in React integrieren.

Sehen wir uns ein solches Szenario an (das folgende Beispiel wird häufig zur Erklärung von ref verwendet, sodass ersichtlich ist, dass das unten beschriebene Szenario klassischer sein sollte): Verwenden eines Ereignisses, um die wird auf die leere Zeichenfolge gesetzt und das Element erhält den Fokus.

var App = React.createClass({
  getInitialState: function() {
   return {userInput: ''};
  },
  handleChange: function(e) {
   this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
   this.setState({userInput: ''}); // 设置值为空字符串
        //这里想要实现获得焦点   
  },
  render: function() {
   return (
    <p>
     <input
      value={this.state.userInput}
      onChange={this.handleChange}
     />
          <input type="button"
           value="Reset And Focus"
           onClick={this.clearAndFocusInput}
        />
    </p>
   );
  }
 });

Im obigen Beispiel haben wir das Klicken auf die Schaltfläche implementiert, um das Eingabeelement zu benachrichtigen, den Wert auf eine leere Zeichenfolge festzulegen, aber wir haben das Eingabeelement noch nicht implementiert, um den Fokus zu erhalten. Dies ist etwas schwierig zu implementieren, da render() nicht die tatsächliche Kombination von Unterkomponenten zurückgibt, sondern lediglich eine Beschreibung einer bestimmten Instanz zu einem bestimmten Zeitpunkt. Dieser Satz fühlt sich ziemlich verwirrend an. Tatsächlich gibt render ein virtuelles DOM zurück, kein echtes DOM. Wir müssen uns also nicht nur auf die von render() zurückgegebenen Komponenten konzentrieren.

Apropos, es hilft uns nicht viel dabei, uns zu konzentrieren. Um die Fokusfunktion zu erreichen, müssen wir ref verwenden. Wir haben oben erwähnt, dass es zwei Arten von Ref-Werten gibt, einer ist ein String und der andere ist eine Callback-Funktion .

Ref-String-Attribut

React unterstützt ein spezielles Attribut, das Sie jeder von render() zurückgegebenen Komponente hinzufügen können. Dies bedeutet, dass die von render() zurückgegebene Komponente markiert ist, sodass die Komponenteninstanz leicht gefunden werden kann. Dafür ist ref da.

Die Form von ref ist wie folgt

<input ref="myInput" />

Um auf diese Instanz zuzugreifen, können Sie über this.refs darauf zugreifen:

this.refs.myInput

In früheren Versionen haben wir kann über React .findDOMNode(this.refs.myInput) darauf zugreifen, um auf das DOM der Komponente zuzugreifen. Aber jetzt wurde die Funktion findDOMNode aufgegeben und kann direkt über this.refs.myInput aufgerufen werden.

Ref-Callback-Funktion

Das Ref-Attribut kann anstelle eines Namens auch eine Callback-Funktion sein. Diese Funktion wird unmittelbar nach dem Mounten der Komponente ausgeführt. Diese referenzierte Komponente dient als Parameter der Funktion . Diese Funktion kann diesen Komponentenparameter sofort verwenden oder ihn natürlich zur späteren Verwendung speichern.

Das Formular ist auch relativ einfach:

render: function() {
  return <TextInput ref={(c) => this._input = c} } />;
},
componentDidMount: function() {
  this._input.focus();
},

oder

render: function() {
  return (
   <TextInput
    ref={function(input) {
     if (input != null) {
      input.focus();
     }
    }} />
  );
},

Hier ist zu beachten, dass beim Entladen der Referenzkomponente und bei Änderung der Referenz die previous Der Parameterwert von ref ist null. Dadurch werden Speicherlecks wirksam verhindert. Daher wird es im obigen Code eine if-Beurteilung geben:

if(input != null){
     input.focus();
}

Die Verwendungsszenarien und Methoden von ref werden oben vorgestellt. Jetzt werden wir das obige Beispiel vervollständigen, um die Funktion zum Erhalten des Fokus zu erreichen

var App = React.createClass({
  getInitialState: function() {
    return {userInput: ''};
  },
  handleChange: function(e) {
    this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
    this.setState({userInput: ''}); // Clear the input
    // We wish to focus the <input /> now!
    if (this.refs.myTextInput !== null) {
      this.refs.myTextInput.focus();
    }
  },
  render: function() {
    return (
      <p>
        <input
          value={this.state.userInput}
          onChange={this.handleChange}
          ref=”myTextInput”   
                     />
        <input
          type="button"
          value="Reset And Focus"
          onClick={this.clearAndFocusInput}
          />
      </p>
    );
  }
});
ReactDOM.render(
  <App />,
  document.getElementById('content')
);

In diesem Beispiel gibt die Renderfunktion eine Beschreibung der -Instanz zurück. Die tatsächliche Instanz wird jedoch über this.refs.myTextInput abgerufen. Solange eine von render zurückgegebene Unterkomponente ref="myTextInput" hat, erhält this.refs.myTextInput die richtige Instanz.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

JS fügt neues Elementelement hinzu

4 Möglichkeiten, die Nodelist-Dom-Liste in JS zu schleifen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie React-Komponentenreferenzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!