Wie fokussiere ich Eingabefelder in React nach dem Rendern?

Fokussieren von Eingabefeldern nach dem Rendern in React

Das Manipulieren von Elementen nach ihrem ersten Rendern ist ein häufiger Bedarf in der Front-End-Entwicklung. Um dies in React für Eingabefelder zu erreichen, muss der Fokus festgelegt werden, um nahtlose Benutzerinteraktionen sicherzustellen.

Ein in der Dokumentation erwähnter Ansatz ist die Verwendung von Refs. Dazu gehört die Zuweisung eines Ref-Attributs zum Eingabefeld innerhalb der Renderfunktion, z. B. ref="nameInput". Um die Eingabe zu fokussieren, können Sie dann this.refs.nameInput.getInputDOMNode().focus(); aufrufen. Dies funktioniert jedoch möglicherweise nicht immer wie erwartet.

Sie haben beispielsweise versucht, this.refs.nameInput.getInputDOMNode().focus(); aufzurufen. innerhalb der Lebenszyklusmethode ComponentDidMount(). Dies wird jedoch nicht funktionieren, da die DOM-Knoten zu diesem Zeitpunkt noch nicht verfügbar sind.

Stattdessen sollte der Fokus gesetzt werden, nachdem das DOM gerendert wurde. Eine Möglichkeit hierfür besteht darin, eine Funktion für die Fokusoperation zu erstellen und diese über die Lebenszyklusmethode „componentDidUpdate()“ aufzurufen. Hier ist ein Beispiel:

<code class="javascript">class MyComponent extends React.Component {
  focusInput() {
    this.inputElement.focus();
  }

  componentDidUpdate() {
    this.focusInput();
  }

  render() {
    return <input ref={el => this.inputElement = el} />;
  }
}</code>

Alternativ können Sie die AutoFocus-Requisite nutzen:

<code class="javascript"><input autoFocus name="..." /></code>

Dadurch wird sichergestellt, dass die Eingabe beim Montieren automatisch den Fokus erhält. Beachten Sie die Großschreibung der AutoFocus-Requisite in JSX.

Das obige ist der detaillierte Inhalt vonWie fokussiere ich Eingabefelder in React nach dem Rendern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!