Bagaimana untuk Tetapkan Fokus pada Medan Input Selepas Rendering dalam React?

Menetapkan Fokus pada Medan Input Selepas Rendering dalam React

React menyediakan beberapa kaedah untuk menetapkan fokus pada medan input selepas komponen telah dipaparkan.

Pilihan 1: Rujukan

Seperti yang dinyatakan dalam dokumentasi, anda boleh menggunakan rujukan untuk mengakses nod DOM medan input. Ini boleh dilakukan dengan menetapkan atribut ref pada medan input dalam fungsi render:

<input ref="nameInput" ... />

Kemudian, selepas komponen dipasang, anda boleh menggunakan kaedah focus() pada nod DOM untuk menetapkan fokus :

componentDidMount() {
  this.refs.nameInput.getInputDOMNode().focus();
}

Pilihan 2: AutoFokus

Anda juga boleh menggunakan autoFocus prop untuk mempunyai input secara automatik memfokus apabila dipasang:

<input autoFocus name=... />

Perhatikan bahawa dalam JSX, autoFokus mesti menggunakan huruf besar, tidak seperti dalam HTML biasa di mana ia tidak peka huruf besar-kecil.

Dengan menggunakan salah satu daripada pilihan ini, anda boleh dengan mudah menetapkan fokus pada medan teks tertentu selepas pemaparan, memastikan pengguna kemudahan dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk Tetapkan Fokus pada Medan Input Selepas Rendering dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!