Memahami Rujukan dan DOM dalam React: Mengakses dan Memanipulasi Elemen DOM

Rujuk dan DOM dalam React: Mengakses dan Memanipulasi Elemen DOM

Dalam React, refs digunakan untuk mengakses dan berinteraksi dengan elemen DOM secara langsung. Walaupun React lazimnya mengurus DOM dengan cara deklaratif melalui keadaan dan prop, ada kalanya anda mungkin perlu berinteraksi dengan DOM secara langsung, seperti untuk animasi, fokus medan bentuk atau mengukur dimensi elemen. Dalam kes ini, rujukan menyediakan cara untuk mengakses nod DOM yang mendasari.

---

1. Apakah Ref dalam React?

ref (singkatan daripada rujukan) ialah objek yang membolehkan anda merujuk kepada elemen DOM atau contoh komponen React. Rujukan boleh dibuat menggunakan React.createRef() dalam komponen kelas atau useRef() dalam komponen fungsi. Rujukan biasanya digunakan untuk:

• Akses DOM secara langsung (contohnya, memfokuskan medan input atau mendapatkan nilai elemen borang).
• Cetuskan animasi atau tindakan yang penting.
• Bersepadu dengan perpustakaan pihak ketiga yang memerlukan manipulasi DOM langsung.

---

2. Mencipta dan Menggunakan Rujukan

Komponen Dalam Kelas:

Dalam komponen kelas, rujukan dibuat menggunakan React.createRef(). Ref yang dibuat kemudiannya dilampirkan pada elemen DOM melalui atribut ref.

Contoh Rujukan dalam Komponen Kelas:

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    // Create a ref to access the input element
    this.inputRef = React.createRef();
  }

  handleFocus = () => {
    // Access the DOM node directly and focus the input element
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input ref="{this.inputRef}" type="text">
        <button onclick="{this.handleFocus}">Focus Input</button>
      </div>
    );
  }
}

export default MyComponent;

Dalam contoh ini:

• this.inputRef dicipta menggunakan React.createRef().
• Ruj diperuntukkan kepada elemen melalui atribut ref.
• Dalam kaedah handleFocus, kami mengakses elemen input melalui this.inputRef.current dan call focus() untuk memfokuskan medan input secara pemrograman.

Dalam Komponen Fungsi:

Dalam komponen fungsi, rujukan dibuat menggunakan cangkuk useRef. Cangkuk useRef membolehkan anda mencipta objek rujukan boleh ubah yang berterusan sepanjang pemaparan semula.

Contoh Rujukan dalam Komponen Fungsi:

import React, { useRef } from 'react';

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

  const handleFocus = () => {
    // Access the DOM node directly and focus the input element
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref="{inputRef}" type="text">
      <button onclick="{handleFocus}">Focus Input</button>
    </div>
  );
};

export default MyComponent;

Dalam contoh ini:

• inputRef dicipta menggunakan cangkuk useRef.
• Ruj dilampirkan pada elemen menggunakan atribut ref.
• Fungsi handleFocus mengakses elemen input menggunakan inputRef.current dan memanggil focus() untuk memfokuskan medan input.

---

3. Gunakan Sarung untuk Ruj

a. Mengakses Elemen DOM

Rujuk biasanya digunakan untuk mengakses dan memanipulasi elemen DOM secara langsung. Contohnya, memfokus pada input teks atau mengukur saiz elemen boleh dilakukan dengan mudah dengan rujukan.

b. Menguruskan Fokus

Rujuk membenarkan anda mengurus fokus untuk elemen, seperti memfokus pada medan input apabila komponen dipasang atau selepas tindakan tertentu.

Contoh Mengurus Fokus dengan Ruj:

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    // Create a ref to access the input element
    this.inputRef = React.createRef();
  }

  handleFocus = () => {
    // Access the DOM node directly and focus the input element
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input ref="{this.inputRef}" type="text">
        <button onclick="{this.handleFocus}">Focus Input</button>
      </div>
    );
  }
}

export default MyComponent;

Dalam contoh ini, input difokuskan secara automatik apabila komponen dipasang, terima kasih kepada cangkuk useEffect dan ref.

c. Mencetuskan Animasi atau Mengintegrasikan dengan Perpustakaan Pihak Ketiga

Ruj sering digunakan untuk berinteraksi dengan perpustakaan pihak ketiga atau mencetuskan animasi penting. Contohnya, anda mungkin menggunakan ref untuk mengawal animasi tersuai atau berinteraksi dengan pustaka bukan React seperti jQuery.

d. Pengesahan Borang

Rujuk juga boleh digunakan untuk mengumpulkan data borang tanpa menyimpan data dalam keadaan React, memberikan alternatif mudah untuk borang yang tidak memerlukan kemas kini masa nyata.

---

4. Mengurus Rujukan untuk Pelbagai Elemen

Apabila bekerja dengan berbilang elemen, anda boleh menyimpan rujukan dalam objek atau tatasusunan untuk mengakses setiap elemen.

Contoh Rujukan untuk Berbilang Elemen:

import React, { useRef } from 'react';

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

  const handleFocus = () => {
    // Access the DOM node directly and focus the input element
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref="{inputRef}" type="text">
      <button onclick="{handleFocus}">Focus Input</button>
    </div>
  );
};

export default MyComponent;

Dalam contoh ini, berbilang elemen input diurus menggunakan tatasusunan rujukan dan butang digunakan untuk memfokuskan input kedua.

---

5. Ruj lwn Negeri

Walaupun rujukan menyediakan cara untuk berinteraksi dengan DOM, keadaan dalam React digunakan untuk mengurus data yang mempengaruhi pemaparan UI. Adalah penting untuk memahami masa untuk menggunakan setiap:

• Keadaan digunakan untuk pemarahan dinamik: Apabila data berubah dan mempengaruhi cara UI harus dipaparkan, gunakan keadaan.
• Rujuk digunakan untuk tindakan penting: Apabila anda perlu berinteraksi secara langsung dengan elemen DOM (cth. memfokus, mengukur atau mencetuskan animasi), gunakan rujukan.

---

6. Kesimpulan

Ref dalam React ialah ciri berkuasa untuk mengakses dan memanipulasi elemen DOM secara langsung. Ia menyediakan cara yang penting untuk berinteraksi dengan UI, mendayakan operasi seperti memfokuskan medan input, mencetuskan animasi atau menyepadukan dengan perpustakaan pihak ketiga.

Walaupun React menggalakkan pendekatan deklaratif dengan keadaan dan prop, rujukan berfungsi sebagai alat penting apabila anda perlu melakukan lebih banyak interaksi langsung dengan DOM.

Atas ialah kandungan terperinci Memahami Rujukan dan DOM dalam React: Mengakses dan Memanipulasi Elemen DOM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!