Mengendalikan Acara dalam React- Panduan komprehensif untuk mengendalikan acara React .js

Acara memainkan peranan penting dalam mencipta antara muka pengguna yang interaktif dan dinamik dalam React. Dalam tutorial ini, kami akan meneroka cara mengendalikan acara React dan bertindak balas terhadap tindakan pengguna dengan berkesan.

 

Pengendalian Acara di JSX

React menyediakan sistem acara sintetik yang membungkus peristiwa penyemak imbas asli dan menormalkannya merentas penyemak imbas yang berbeza. Kami boleh melampirkan pengendali acara terus ke elemen JSX menggunakan onEventName atribut.

Contoh:

function handleClick() {  
  console.log("Button clicked!");  
}  
  
<button onClick={handleClick}>Click Me</button>

 

Pengendali Acara dan Objek Acara

Apabila peristiwa dicetuskan, React secara automatik menghantar objek acara ke fungsi pengendali acara. Kami boleh mengakses objek ini untuk mendapatkan maklumat tambahan tentang acara tersebut, seperti elemen sasaran, koordinat tetikus, dsb.

Contoh:

function handleMouseOver(event) {  
  console.log("Mouse coordinates:", event.clientX, event.clientY);  
}  
  
<div onMouseOver={handleMouseOver}>Hover over me</div>

 

Pengendali Acara Mengikat

Apabila menyerahkan pengendali acara sebagai prop, penting untuk mengikatnya pada contoh komponen. Ini memastikan bahawa this konteks yang betul dikekalkan apabila peristiwa dicetuskan.

Contoh:

class MyComponent extends React.Component {  
  handleClick() {  
    console.log("Button clicked!");  
  }  
  
  render() {  
    return <button onClick={this.handleClick.bind(this)}>Click Me</button>;  
  }  
}

 

Penyebaran Peristiwa dan Mencegah Tindakan Lalai

React menggunakan sistem peristiwa sintetik yang secara automatik mengendalikan penyebaran peristiwa. Untuk mengelakkan tingkah laku penyemak imbas lalai, seperti penyerahan borang atau navigasi pautan, kami boleh memanggil event.preventDefault() kaedah tersebut.

Contoh:

function handleSubmit(event) {  
  event.preventDefault();  
  console.log("Form submitted!");  
}  
  
<form onSubmit={handleSubmit}>  
  <input type="text" />  
  <button type="submit">Submit</button>  
</form>

Dengan memahami cara mengendalikan acara dalam React, anda boleh mencipta antara muka pengguna interaktif dan responsif yang bertindak balas dengan lancar kepada tindakan pengguna

 

Berikut ialah senarai acara biasa di React

1. onClick: Peristiwa ini berlaku apabila elemen diklik.

Contoh:

<button onClick={handleClick}>Click Here</button>

2. onChange: Peristiwa ini berlaku apabila nilai elemen input(input, pilih, textarea) berubah.

Contoh:

<input type="text" onChange={handleChange} />

3. onSubmit: Peristiwa ini berlaku apabila borang diserahkan. Contoh:

<form onSubmit={handleSubmit}>  
  <input type="text" />  
  <button type="submit">Submit</button>  
</form>

4. onMouseEnter: Peristiwa ini berlaku apabila penunjuk tetikus memasuki elemen.

Contoh:

<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div>

5. onMouseLeave: Peristiwa ini berlaku apabila penunjuk tetikus meninggalkan elemen.

Contoh:

<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div>

6. onKeyDown: Peristiwa ini berlaku apabila kekunci ditekan ke bawah.

Contoh:

<input type="text" onKeyDown={handleKeyDown} />

7. onKeyUp: Peristiwa ini berlaku apabila kunci dilepaskan.

Contoh:

<input type="text" onKeyUp={handleKeyUp} />

8. onFocus: Peristiwa ini berlaku apabila elemen menerima fokus.

Contoh:

<input type="text" onFocus={handleFocus} />

9. onBlur: Peristiwa ini berlaku apabila elemen hilang fokus.

Contoh:

<input type="text" onBlur={handleBlur} />

10. onScroll: Peristiwa ini berlaku apabila elemen ditatal.

Contoh:

<div onScroll={handleScroll}>Scrollable Content</div>

 

Ini hanyalah beberapa contoh peristiwa biasa dalam React. Anda boleh menggunakan acara ini atau mencipta acara tersuai mengikut keperluan anda dalam React aplikasi anda.