So verwenden Sie React.createRef()

Blog

So verwenden Sie React.createRef()

So verwenden Sie React.createRef()

Wenn Sie lange genug Webanwendungen entwickelt haben, haben Sie wahrscheinlich irgendwann JavaScript verwendet BEURTEILUNG Bibliotheken wie z jQuery , Mootools , Prototype.js , usw. Das Aufkommen dieser Bibliotheken brachte einen großen Wandel in der Art und Weise mit sich, wie interaktive Webanwendungen erstellt wurden. Mit DOM-Abstraktions-APIs wurde die Manipulation des Inhalts einer Web-App so viel einfacher.

Zum Beispiel würden Sie mit jQuery so etwas tun:

$('#button').on('click', function(evt) { evt.preventDefault(); var content = $(' {/* Attach the created ref: this.inputField */} ) } }

Wir haben hier ein paar Änderungen für die unkontrollierte Version unserer vorherigen Komponente vorgenommen. Zuerst erstellen wir eine Referenz mit |_+_| und speichern Sie es im |_+_| Instanzeigenschaft. Wir fügen die Referenz auch an das |_+_| . an Element im |_+_| Methode.

Wir verwenden auch die |_+_| Requisite zum Zuweisen von |_+_| als Standardwert des |_+_| element — das ist nur nützlich, bis der Eingabewert zum ersten Mal geändert wird.

Wenn wir das |_+_| . verwendet hätten prop, um einen Standardwert für die Eingabe anzugeben, dann erhalten wir keine aktualisierten Werte mehr aus der Eingabe. Dies liegt daran, dass in React die |_+_| prop überschreibt automatisch den Wert im DOM.

Schließlich greifen wir in unserem Event-Handler auf den Wert des input-Elements über die ref anstelle des Event-Objekts zu. Also machen wir das:

React.createRef()

anstatt dies zu tun:

this.inputField

Die Demo ist die gleiche wie bei der kontrollierten Version. Hier ist eine Beispieldemo, wie die Interaktion aussieht:

Abschluss

In diesem Tutorial haben wir verschiedene Methoden betrachtet, mit denen wir mit dem DOM in einer React-Anwendung interagieren können. Wir haben gesehen, wie wir das neue |_+_| . verwenden können -Methode, die in React 16.3 eingeführt wurde, um das Erstellen von Refs zu vereinfachen.

Wir haben auch überlegt, wie wir Refs in unkontrollierten Komponenten verwenden können. Sie können auf die Dokumentation reagieren um mehr darüber zu erfahren, was Sie mit refs tun können.

#reactjs #react-js #web-entwicklung