So verwenden Sie Refs in React-Komponenten

Dieser Artikel stellt hauptsächlich die detaillierte Verwendung von React-Komponentenreferenzen vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

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 Komponentenattribut kann sein Attributwert eine Zeichenfolge 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 zu setzen, 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 Referenzwerten 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.

ref hat die folgende Form

<input ref="myInput" />

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

this.refs.myInput

In früheren Versionen können wir React.findDOMNode( this .refs.myInput), 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. Die referenzierte Komponente wird als Parameter für die Funktion verwendet, die den Komponentenparameter sofort verwenden oder zur späteren Verwendung speichern kann.

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();
     }
    }} />
  );
},

Hierbei ist zu beachten, dass beim Entladen der Referenzkomponente und der Änderung der Referenz die Parameter der vorherigen geändert werden ref Der Wert 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(&#39;content&#39;)
);

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 habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So ändern Sie den Projektnamen über das vue-cli+webpack-Projekt

So implementieren Sie die globale Registrierung in die Vue-Komponente und die lokale Registrierung

So implementieren Sie eine benutzerdefinierte globale Methode in Vue

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