Mengendalikan Event

16 minitPertengahanReact

Dalam pelajaran ini

Pasang handler dengan onClick dan onChange
Bezakan antara menghantar function (onClick={fn}) dan memanggilnya (onClick={fn()})
Hantar event handler ke component anak sebagai props
Baca e.target.value dan bina controlled input

Idea utama

Dalam React anda tidak memanggil addEventListener. Anda hantar function sebagai prop seperti onClick, React memanggilnya bila event berlaku, dan handler anda biasanya mengemas kini state.

Dalam JavaScript biasa anda mencari elemen dan memasang listener. Dalam React, anda terangkan listener itu terus dalam JSX, di sebelah elemen yang berkaitan. Prop event ditulis dalam camelCase: onClick, onChange, onSubmit, onKeyDown.

DOM biasa

JavaScript

const btn = document.querySelector("#plus");
btn.addEventListener("click", () => {
  cups = cups + 1;
  render(); // you redraw by hand
});

React

JSX

function addCup() {
  setCups(cups + 1); // React re-renders
}

<button onClick={addCup}>+</button>

Hantar function — jangan panggil

Inilah bug event React yang paling biasa. Ingat bahawa { } menjalankan JavaScript semasa render. onClick={addCup} memberi React function itu untuk dipanggil kemudian. onClick={addCup()} memanggilnya sekarang juga, semasa render, dan memberi React apa sahaja yang dipulangkan (biasanya undefined). Kalau function itu mengubah state, anda dapat gelung tanpa henti dan React berhenti dengan "Too many re-renders".

Dipanggil semasa render

JSX

<button onClick={addCup()}>+</button>

<button onClick={setDrink("Kopi O")}>
  Kopi O
</button>

Dipanggil bila diklik

JSX

<button onClick={addCup}>+</button>

<button onClick={() => setDrink("Kopi O")}>
  Kopi O
</button>

Perlu hantar argumen? Balut panggilan itu dalam arrow function: () => setDrink("Kopi O"). Arrow itu dicipta sekarang; panggilan di dalamnya berjalan bila diklik.

Objek event

React memanggil handler anda dengan objek event — pembalut kepada event asli pelayar dengan bahagian yang sama: e.target (elemen itu), e.target.value (teks semasa dalam input), e.key, e.preventDefault().

JSX

function handleChange(e) {
  console.log(e.target.value); // what's in the box right now
}

<input onChange={handleChange} />

Dalam React, onChange dicetuskan pada setiap ketukan kekunci (seperti event input dalam DOM), bukan hanya bila kotak itu hilang fokus.

Handler sebagai props

Component anak selalunya tidak patut memiliki state — induk yang memilikinya. Jadi induk menghantar function ke bawah sebagai prop, dan anak memanggilnya. Mengikut kebiasaan, prop dinamakan onSomething dan function itu handleSomething.

JSX

function DrinkButton({ label, onPick }) {
  return <button onClick={onPick}>{label}</button>;
}

// in the parent:
<DrinkButton label="Kopi O" onPick={() => setDrink("Kopi O")} />

Pratonton: controlled input

Beri input kedua-dua value={note} dan onChange yang mengemas kini note, dan state React menjadi satu-satunya sumber kebenaran bagi isi kotak itu. Itulah controlled input. Oleh kerana nilainya datang dari state, mengosongkan state turut mengosongkan kotak itu. Anda akan guna corak ini untuk setiap borang nanti dalam track ini.

value tanpa onChange menjadikan kotak itu baca sahaja: menaip tidak memberi kesan, dan React memberi amaran dalam console. Sentiasa gandingkan kedua-duanya.

Butang + dan - belum berfungsi. Sambungkan kepada addCup dan removeCup dengan onClick — hantar function itu, jangan panggil.

Kemudian pastikan pesanan tidak boleh kurang daripada 1 cawan: ubah removeCup supaya ia hanya mengurangkan bila cups lebih daripada 1.

Semakan

+ menambah satu cawan
- membuang satu cawan
Ia tidak pernah kurang daripada 1

Uji kefahaman

Apa yang berlaku dengan <button onClick={save()}>Save</button>?

save berjalan bila butang dikliksave berjalan setiap kali render, dan nilai pulangannya menjadi handler klikTiada apa-apa — React mengabaikan kurungan itu

Dalam onChange={(e) => setName(e.target.value)}, apakah e.target.value?

Teks semasa dalam inputNilai name sebelumnyaKekunci yang ditekan

Apa yang menjadikan input itu "controlled"?

Ia ada idvalue-nya datang dari state dan onChange mengemas kini state ituIa guna document.querySelector untuk membaca teks

Apa yang anda pelajari

Prop event ditulis camelCase (onClick, onChange) dan menerima function.
onClick={fn} menghantarnya; onClick={fn()} memanggilnya semasa render. Perlu argumen? onClick={() => fn(x)}.
Induk menghantar handler ke bawah sebagai props onSomething; anak memanggilnya.
value + onChange (membaca e.target.value) menghasilkan controlled input yang dipacu oleh state.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.