Heim > Artikel > Web-Frontend > Wie man beim Reagieren den Fokus setzt
Wie man beim Reagieren den Fokus setzt
- 藏色散人Original
- 2022-12-27 11:18:382210Durchsuche
So legen Sie den Fokus in React fest: 1. Verwenden Sie DOM-Elemente in ComponentDidMount. 2. Rufen Sie die DOM-API von „this.input.focus()“ auf, um die Funktion des automatischen Fokussierens auf das Eingabefeld nach dem Laden der Seite zu erreichen.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.
Wie setzt man den Fokus beim Reagieren?
React konzentriert sich nach dem Aufrufen der Seite automatisch auf ein Eingabefeld.
In React.js müssen Sie sich grundsätzlich nicht direkt mit dem DOM befassen. React.js bietet eine Reihe von on*-Methoden, die uns bei der Überwachung von Ereignissen helfen. Daher ist es nicht erforderlich, die DOM-API von addEventListener in der Vergangenheit direkt aufzurufen. Wir haben die Seite durch manuelle DOM-Vorgänge aktualisiert (z. B. mit Hilfe von jQuery), aber in js können Komponenten direkt über setState neu gerendert werden. Beim Rendern können neue Requisiten an Unterkomponenten übergeben werden, um den Seitenaktualisierungseffekt zu erzielen.
Der Re-Rendering-Mechanismus von React.js hilft uns, die meisten DOM-Aktualisierungsvorgänge zu vermeiden und entfernt außerdem Bibliotheken von Drittanbietern wie jQuery, die hauptsächlich DOM-Vorgänge kapseln, aus unserer Entwicklungstoolkette.
Aber React.js kann nicht alle DOM-Betriebsanforderungen vollständig erfüllen. Manchmal müssen wir uns immer 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. Wenn Sie beispielsweise die Größe eines DOM-Elements für nachfolgende Animationen dynamisch abrufen möchten , usw.
React.js stellt das ref-Attribut bereit, um uns beim Abrufen des DOM-Knotens des gemounteten Elements zu helfen. Sie können das ref-Attribut zu einem JSX-Element hinzufügen.
Sie können sehen, dass wir dem Eingabeelement ein Ref-Attribut hinzugefügt haben und der Wert dieses Attributs eine Funktion ist. Wenn das Eingabeelement auf der Seite gemountet wird, ruft React.js diese Funktion auf und übergibt den gemounteten DOM-Knoten an diese Funktion. In der Funktion legen wir dieses DOM-Element als Attribut der Komponenteninstanz fest, damit wir dieses DOM-Element in Zukunft über this.input abrufen können.
Dann können wir dieses DOM-Element in ComponentDidMount verwenden und die DOM-API von this.input.focus() aufrufen. Insgesamt wird damit die Funktion erreicht, sich nach dem Laden der Seite automatisch auf das Eingabefeld zu konzentrieren (Sie können feststellen, dass wir den Lebenszyklus der Komponente „componentDidMount“ verwenden).
Wir können jedem HTML-Element-Tag ref hinzufügen, um dessen DOM-Element abzurufen und die DOM-API aufzurufen. Aber denken Sie an einen Grundsatz: Verwenden Sie ref nicht, wenn Sie können. Vermeiden Sie insbesondere die Verwendung von ref für automatische Seitenaktualisierungsvorgänge und Ereignisüberwachung, bei der Ihnen React.js helfen kann. Redundante DOM-Operationen sind tatsächlich „Rauschen“ im Code, was unserem Verständnis und unserer Wartung nicht förderlich ist.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 进入页面以后自动 focus 到某个输入框</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class AutoFocusInput extends React.Component {
componentDidMount () {
this.input.focus()
}
render () {
return (
<input ref={(input) => this.input = input} />
)
}
}
ReactDOM.render(
<AutoFocusInput />,
document.getElementById('root')
);
</script>
</body>
</html>Eine andere Schreibweise:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 进入页面以后自动 focus 到某个输入框</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
render() {
return <input type="text" ref={this.inputRef} />;
}
componentDidMount() {
this.inputRef.current.focus();
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('root')
);
</script>
</body>
</html>Empfohlenes Lernen: „Video-Tutorial reagieren“
Das obige ist der detaillierte Inhalt vonWie man beim Reagieren den Fokus setzt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!