Memahami bentuk dan peristiwa dalam React

Tutorial ini menerangkan peristiwa reaksi, komponen terkawal, dan pengendalian acara, menunjukkan cara membina borang terkawal dan memancarkan data dari kanak -kanak ke komponen induk. Mari buat borang profil pengguna menggunakan React.

Pertama, buat aplikasi React baru. Komponen UserProfile, yang terletak di src/UserProfile.js, menjadikan borang untuk butiran profil pengguna. Import ke dalam komponen root anda (src/App.js):

import UserProfile from './UserProfile';

function App() {
  return (
    <div classname="App">
      <userprofile></userprofile>
    </div>
  );
}

export default App;

gaya bentuk menggunakan src/App.css:

.App {
  text-align: left;
  margin-left: 20%;
  margin-right: 20%;
}

label {
  display: inline-block;
  margin-right: 1em;
  width: 4em;
}

input {
  width: 15em;
}

Borang yang diberikan pada mulanya tidak akan dibatalkan kepada keadaan permohonan. Untuk menyambungkan input borang ke negeri, kami akan menggunakan pengendali acara.

React Events

Acara React adalah tindakan yang dicetuskan oleh interaksi pengguna atau peristiwa sistem (klik, penekan kunci, beban halaman, dan lain -lain). Untuk menangani perubahan input, kami akan menggunakan acara onChange. Ubah suai input name dalam UserProfile.js:

<input id="name-field" type="text" value="{name}" onchange="{(e)"> setName(e.target.value)}
/>

Begitu juga, kemas kini input email, age, dan password menggunakan pembolehubah negeri masing -masing dan useState cangkuk.

Untuk log keadaan, tambahkan fungsi ke UserProfile.js:

const logState = () => {
  console.log(name);
  console.log(email);
  console.log(age);
  console.log(password);
};

Kemas kini butang hantar untuk memanggil logState:

<button onclick="{logState}">Submit</button>

Mengklik "Hantar" log data borang ke konsol. Ini menunjukkan pengikatan data dua hala: perubahan dalam paparan mengemas kini keadaan, dan perubahan keadaan mengemas kini pandangan.

Acara pemancar

Untuk menghantar data dari kanak -kanak (UserProfile) kepada ibu bapa (App), kami akan memancarkan acara. Tambah fungsi emit ke UserProfile.js:

const emit = () => {
  props.callback({ name, email, age, password });
};

Kemas kini butang hantar untuk memanggil emit:

<button onclick="{emit}">Submit</button>

Sekarang, dalam App.js, tambahkan fungsi panggil balik dan lulus sebagai prop untuk UserProfile:

function App() {
  const [data, setData] = useState({});
  const importData = (data) => setData(data);

  return (
    <div classname="App">
      <userprofile callback="{importData}"></userprofile>
      <p>Name: {data.name || "No name To Display"}</p>
      <p>Email: {data.email || "No email To Display"}</p>
    </div>
  );
}

Sekarang, mengemukakan borang akan mengemas kini komponen induk, memaparkan data yang dikemukakan.

Ini melengkapkan tutorial. Anda telah belajar bagaimana membuat komponen terkawal, mengendalikan peristiwa, dan memancarkan peristiwa dalam React. Ingatlah untuk menggantikan laluan imej letak dengan laluan imej sebenar.

Atas ialah kandungan terperinci Memahami bentuk dan peristiwa dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!