Nachfrage:
Wenn Sie mobile Projekte ausführen, führen Sie das Eingabefeld Eingabe ein. Wenn Sie das Eingabefeld Eingabe verwenden, hoffe ich, dass der Fokus automatisch angezeigt wird, sodass die Eingabemethode auf dem mobilen Terminal automatisch angezeigt wird, was für Benutzer praktisch ist.
leisten:
<Input
ref={
function (input) {
if (input != null) {
input.focus();
}
}}
/>
Warum
In React.js müssen Sie sich grundsätzlich nicht direkt mit dem DOM befassen. React.js bietet eine Reihe von on * -Methoden, mit denen wir Ereignisse überwachen können. Daher muss die DOM-API von addEventListener in React.js nicht direkt aufgerufen werden. In der Vergangenheit haben wir manuelle DOM-Vorgänge zum Aktualisieren der Seite verwendet (z. B.) , mit Hilfe von jQuery), aber in React.js. In js kann die Komponente direkt über setState neu gerendert werden, und die neuen Requisiten können während des Renderns an die untergeordnete Komponente übergeben werden, um den Effekt der Seite zu erzielen aktualisieren.
Der Re-Rendering-Mechanismus von React.js hilft uns, die meisten DOM-Aktualisierungsvorgänge zu vermeiden, und ermöglicht auch das Entfernen von Bibliotheken von Drittanbietern wie jQuery, die hauptsächlich DOM-Vorgänge kapseln, aus unserer Entwicklungs-Toolkette.
React.js kann jedoch nicht alle DOM-Manipulationsanforderungen vollständig erfüllen. Manchmal müssen wir uns noch mit DOM befassen. Wenn Sie sich beispielsweise nach dem Aufrufen der Seite automatisch auf ein Eingabefeld konzentrieren möchten, müssen Sie die DOM-API von input.focus () aufrufen. Sie möchten beispielsweise die Größe eines DOM-Elements für die nachfolgende Animation dynamisch abrufen. und so weiter.
React.js stellt das ref-Attribut bereit, mit dessen Hilfe wir den DOM-Knoten des bereitgestellten Elements ermitteln können. Sie können das ref-Attribut einem JSX-Element hinzufügen:
class AutoFocusInput extends Component {
componentDidMount () {
this.input.focus()
}
render () {
return (
<input ref={
(input) => this.input = input} />
)
}
}
ReactDOM.render(
<AutoFocusInput />,
document.getElementById('root')
)
Sie können sehen, dass wir dem Eingabeelement ein ref-Attribut hinzugefügt haben und der Attributwert eine Funktion ist. Wenn das Eingabeelement auf der Seite bereitgestellt wird, ruft React.js diese Funktion auf und übergibt den bereitgestellten DOM-Knoten an diese Funktion. In der Funktion setzen wir dieses DOM-Element als Attribut der Komponenteninstanz, damit wir dieses DOM-Element in Zukunft über this.input erhalten können.
Dann können wir dieses DOM-Element in componentDidMount verwenden und die DOM-API von this.input.focus () aufrufen. Insgesamt ist die Funktion, sich beim Laden der Seite automatisch auf das Eingabefeld zu konzentrieren, abgeschlossen (Sie können feststellen, dass wir den Komponentenlebenszyklus von componentDidMount verwenden).
Wir können jedem repräsentativen HTML-Element-Tag ref hinzufügen, um sein DOM-Element abzurufen, und dann die DOM-API aufrufen. Aber denken Sie an ein Prinzip: Wenn Sie ref verwenden können, verwenden Sie es nicht. Vermeiden Sie insbesondere die Verwendung von ref, um die automatischen Seitenaktualisierungsvorgänge und die Ereignisüberwachung durchzuführen, die React.js Ihnen bereits helfen kann. Übermäßige DOM-Operationen sind tatsächlich "Rauschen" im Code, was unserem Verständnis und unserer Wartung nicht förderlich ist.
Übrigens können Sie dem Komponenten-Tag tatsächlich ref hinzufügen, zum Beispiel:
<Clock ref={
(clock) => this.clock = clock} />
Auf diese Weise erhalten Sie eine Instanz dieser Clock-Komponente, die in React.js initialisiert wurde. Dies ist jedoch keine gängige Praxis, und es wird nicht empfohlen, dies zu tun. Daher wird es hier kurz erwähnt, und interessierte Freunde können selbst lernen und erkunden.
