Nangani Acara ing React- Pandhuan lengkap kanggo nangani acara React .js

Acara nduweni peran penting kanggo nggawe antarmuka pangguna sing interaktif lan dinamis ing React. Ing tutorial iki, kita bakal njelajah cara nangani acara React lan nanggapi tumindak pangguna kanthi efektif.

 

Penanganan Acara ing JSX

React nyedhiyakake sistem acara sintetik sing mbungkus acara browser asli lan normalake ing macem-macem browser. Kita bisa masang panangan acara langsung menyang unsur JSX nggunakake onEventName atribut.

Tuladha:

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

 

Penanganan Acara lan Obyek Acara

Nalika acara dipicu, React kanthi otomatis ngliwati obyek acara menyang fungsi pengendali acara. Kita bisa ngakses obyek iki kanggo entuk informasi tambahan babagan acara kasebut, kayata unsur target, koordinat mouse, lsp.

Tuladha:

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

 

Naleni Event Handlers

Nalika menehi panangan acara minangka peraga, penting kanggo ngiket menyang conto komponen. Iki mesthekake yen this konteks sing bener dijaga nalika acara kasebut dipicu.

Tuladha:

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

 

Panyebaran Acara lan Nyegah Tindakan Default

React nggunakake sistem acara sintetik sing otomatis nangani panyebaran acara. Kanggo nyegah prilaku browser standar, kayata kiriman formulir utawa navigasi link, kita bisa nelpon event.preventDefault() cara kasebut.

Tuladha:

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

Kanthi mangerteni carane nangani acara ing React, sampeyan bisa nggawe antarmuka panganggo interaktif lan responsif sing seamlessly nanggapi tumindak pangguna.

 

Punika dhaptar acara umum ing React

1. onClick: Acara iki dumadi nalika unsur diklik.

Tuladha:

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

2. onChange: Iki acara occurs nalika Nilai saka unsur input(input, pilih, textarea) owah-owahan.

Tuladha:

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

3. onSubmit: Acara iki kedadeyan nalika formulir diajukake. Tuladha:

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

4. onMouseEnter: Acara iki dumadi nalika pointer mouse ngetik unsur.

Tuladha:

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

5. onMouseLeave: Acara iki dumadi nalika pointer mouse ninggalake unsur.

Tuladha:

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

6. onKeyDown: Acara iki kedadeyan nalika tombol ditekan.

Tuladha:

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

7. onKeyUp: Acara iki dumadi nalika tombol dirilis.

Tuladha:

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

8. onFocus: Acara iki dumadi nalika unsur nampa fokus.

Tuladha:

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

9. onBlur: Acara iki dumadi nalika unsur ilang fokus.

Tuladha:

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

10. onScroll: Acara iki dumadi nalika unsur digulung.

Tuladha:

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

 

Iki mung sawetara conto acara umum ing React. Sampeyan bisa nggunakake acara kasebut utawa nggawe acara khusus miturut kabutuhan ing React aplikasi sampeyan.