Bekerja dengan Borang dalam React

Mengendalikan input pengguna adalah asas kepada hampir semua aplikasi, dan dalam dunia pembangunan web, borang HTML adalah alat standard untuk tugas ini. Jika anda baru bertindak balas, mengintegrasikan borang mungkin kelihatan menakutkan. Artikel ini memberikan panduan yang jelas dan ringkas untuk bekerja dengan bentuk dalam React, yang meliputi kedua -dua teknik asas dan canggih.

Konsep Utama

• Input yang tidak terkawal: Ini adalah pendekatan yang paling mudah. React tidak menjejaki keadaan input; Sebaliknya, anda terus mengakses nilai dari elemen DOM semasa penyerahan. Ini sesuai untuk bentuk yang sangat mudah. ​​
• Input terkawal: React menguruskan keadaan input. Ini menawarkan kawalan yang lebih baik, membolehkan pengesahan masa nyata, pemformatan, rendering bersyarat, dan penjanaan input dinamik. Ini adalah pendekatan yang disyorkan untuk kebanyakan senario.
• Pengesahan masa nyata: Komponen terkawal membolehkan maklum balas segera mengenai kesahihan input sebagai jenis pengguna, meningkatkan pengalaman pengguna.
• Perpustakaan pihak ketiga: perpustakaan seperti Pengurusan Borang Segar Segar, terutamanya untuk bentuk kompleks, mengurangkan kod boilerplate.

Input yang tidak terkawal: Pendekatan Asas

Input tidak terkawal Leverage Refs untuk mengakses nod DOM yang mendasari. Begini bagaimana ia kelihatan dalam komponen berfungsi:

function SimpleForm() {
  const nameEl = React.useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(nameEl.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name:</label>
      <input type="text" ref={nameEl} id="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

untuk komponen kelas,

digunakan dalam pembina. Sementara input yang tidak terkawal, tidak mempunyai ciri -ciri rakan -rakan terkawal mereka. React.createRef()

Contoh: borang log masuk (tidak terkawal)

function LoginForm() {
  // ... (refs for username, password, rememberMe) ...

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      username: nameEl.current.value,
      password: passwordEl.current.value,
      rememberMe: rememberMeEl.current.checked,
    };
    // ... (submit data) ...
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* ... (input fields) ... */}
    </form>
  );
}

Keterbatasan input yang tidak terkawal menjadi jelas apabila memerlukan pengesahan masa nyata atau tingkah laku bentuk dinamik.

input terkawal: Kawalan yang dipertingkatkan

Input terkawal mengekalkan keadaan dalam komponen React. Perubahan kepada kemas kini input keadaan, dan perubahan keadaan mengemas kini input.

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '' };
  }

  handleInput = (event) => {
    this.setState({ name: event.target.value });
  };

  render() {
    return (
      <input type="text" value={this.state.name} onChange={this.handleInput} />
    );
  }
}

aliran data bulat ini menyediakan kuasa untuk melaksanakan:

• Pengesahan masa nyata: memberikan maklum balas segera mengenai ketepatan input.
• pemformatan input: Memohon pemformatan (mis., Mata wang, nombor telefon) secara dinamik.
• rendering bersyarat: menunjukkan/menyembunyikan elemen berdasarkan nilai input.
• Generasi Input Dinamik: Tambah input berdasarkan interaksi pengguna.

Pengesahan: Maklum balas masa nyata Input terkawal membolehkan pengesahan berterusan. Berikut adalah contoh pengesahan kad kredit yang mudah (menggunakan fungsi hipotesis

):

validateCreditCard

function CreditCardForm() {
  // ... (state for card number and error message) ...

  const handleCardNumber = (e) => {
    const value = e.target.value;
    const isValid = validateCreditCard(value); // Hypothetical validation function
    this.setState({ cardNumber: value, cardError: !isValid });
  };

  return (
    <form>
      <input
        type="text"
        value={this.state.cardNumber}
        onChange={this.handleCardNumber}
      />
      {this.state.cardError && <span>Invalid credit card number</span>}
    </form>
  );
}

Perpustakaan Borang: Pembangunan Streamlining

perpustakaan seperti segar dengan ketara mengurangkan boilerplate. Inilah contoh mudah:

function SimpleForm() {
  const nameEl = React.useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(nameEl.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name:</label>
      <input type="text" ref={nameEl} id="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Perpustakaan ini mengendalikan pengurusan negeri, pengesahan, dan penyerahan, menjadikan pembangunan lebih cekap.

Kesimpulan

Memahami input terkawal dan tidak terkawal adalah penting untuk pengendalian bentuk yang berkesan dalam React. Walaupun input yang tidak terkawal sesuai untuk senario mudah, input terkawal memberikan fleksibiliti dan kuasa yang diperlukan untuk kebanyakan aplikasi. Pertimbangkan menggunakan perpustakaan borang untuk menyelaraskan pembangunan untuk bentuk yang kompleks. Ingatlah untuk mengutamakan pengalaman pengguna melalui maklum balas dan pengendalian ralat yang jelas.

Atas ialah kandungan terperinci Bekerja dengan Borang dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!