Bagaimana untuk Memfokuskan Medan Input dalam Reaksi Selepas Pemberian?

Memfokuskan Medan Input Pasca Render dalam React

Memanipulasi elemen selepas pemaparan awal adalah keperluan biasa dalam pembangunan bahagian hadapan. Dalam React, mencapai ini untuk medan input melibatkan penetapan fokus untuk memastikan interaksi pengguna yang lancar.

Satu pendekatan yang disebut dalam dokumentasi ialah menggunakan rujukan. Ini melibatkan pemberian atribut ref kepada medan input dalam fungsi render, seperti ref="nameInput". Untuk memfokuskan input, anda boleh memanggil this.refs.nameInput.getInputDOMNode().focus();. Walau bagaimanapun, ini mungkin tidak selalu berfungsi seperti yang diharapkan.

Sebagai contoh, anda mungkin telah cuba memanggil this.refs.nameInput.getInputDOMNode().focus(); dalam kaedah kitaran hayat componentDidMount(). Walau bagaimanapun, ini tidak akan berfungsi kerana nod DOM belum lagi tersedia pada peringkat itu.

Sebaliknya, tumpuan harus ditetapkan selepas DOM telah diberikan. Satu cara untuk melakukan ini ialah dengan mencipta fungsi untuk operasi fokus dan memanggilnya daripada kaedah kitaran hayat componentDidUpdate(). Berikut ialah contoh:

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

  componentDidUpdate() {
    this.focusInput();
  }

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

Sebagai alternatif, anda boleh memanfaatkan prop autoFokus:

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

Ini memastikan input menerima fokus secara automatik semasa pemasangan. Perhatikan huruf besar prop autoFokus dalam JSX.

Atas ialah kandungan terperinci Bagaimana untuk Memfokuskan Medan Input dalam Reaksi Selepas Pemberian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!