Bagaimana untuk Memfokuskan Medan Input dalam Reaksi Selepas Pemberian?

Memfokuskan Medan Input dalam React Post-Rendering

Dalam React, menetapkan fokus pada medan input selepas pemaparan boleh dicapai melalui pelbagai kaedah .

Satu pendekatan ialah menggunakan rujukan seperti yang dicadangkan dalam dokumentasi. Dengan memberikan rujukan kepada medan input dalam fungsi pemaparan (cth., "nameInput"), anda boleh mengakses nod DOMnya dan menggunakan kaedah fokus secara manual. Walau bagaimanapun, adalah penting untuk memahami di mana dan bila untuk memanggil fungsi ini.

Fungsi Fokus Memanggil

Lokasi paling mudah untuk memanggil fungsi fokus ialah kaedah kitaran hayat componentDidMount . Ini memastikan bahawa fokus ditetapkan selepas komponen telah dipasang dalam DOM. Kod tersebut akan kelihatan seperti ini:

import React, { useRef, useEffect } from "react";

const MyComponent = () => {
  const nameInputRef = useRef();

  useEffect(() => {
    if (nameInputRef.current) {
      nameInputRef.current.focus();
    }
  }, []);

  return (
    <input ref={nameInputRef} name="..." />
  );
};

export default MyComponent;

Pilihan Autofokus

Sebaliknya, anda boleh menggunakan prop autoFokus yang disediakan oleh React. Dengan menetapkan prop ini kepada benar pada medan input, komponen akan mendapat fokus secara automatik apabila dipasang.

return (
  <input autoFocus name="..." />
);

Perhatikan bahawa, dalam JSX, sifat adalah autoFokus (dengan huruf besar F), tidak seperti kes- atribut HTML tidak sensitif.

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!