Imeachtaí a Láimhseáil i React- Treoir chuimsitheach maidir le láimhseáil imeachtaí i React .js

Tá ról ríthábhachtach ag imeachtaí maidir le comhéadain úsáideora idirghníomhacha agus dhinimiciúla a chruthú i React. Sa rang teagaisc seo, déanfaimid iniúchadh ar conas imeachtaí a láimhseáil React agus freagairt go héifeachtach do ghníomhaíochtaí úsáideoirí.

 

Láimhseáil Imeachtaí in JSX

React cuireann sé córas imeachtaí sintéiseacha ar fáil a chumhdaíonn imeachtaí an bhrabhsálaí dúchais agus a normalaíonn iad thar brabhsálaithe éagsúla. Is féidir linn láimhseálaithe imeachtaí a cheangal go díreach le heilimintí JSX ag baint úsáide as an onEventName aitreabúid.

Sampla:

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

 

Láimhseálaithe Imeachtaí agus Cuspóirí Imeachta

Nuair a spreagtar imeacht, React cuireann réad imeachta ar aghaidh go huathoibríoch chuig feidhm láimhseálaí an imeachta. Is féidir linn rochtain a fháil ar an réad seo chun faisnéis bhreise a fháil faoin imeacht, mar shampla sprioceilimint, comhordanáidí luiche, etc.

Sampla:

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

 

Láimhseálaithe Imeachtaí Ceangailteacha

Nuair a bhíonn láimhseálaithe imeachtaí á gcur ar aghaidh mar fhearais, tá sé tábhachtach iad a cheangal leis an gcomhábhar. this Cinntíonn sé seo go gcoimeádtar an comhthéacs ceart nuair a chuirtear tús leis an imeacht.

Sampla:

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

 

Iomadú Imeachtaí agus Gníomhartha Réamhshocraithe a Chosc

React úsáideann córas imeachtaí sintéiseach a láimhseálann go huathoibríoch iomadú imeachtaí. Chun iompar réamhshocraithe an bhrabhsálaí a chosc, mar shampla foirm a chur isteach nó nascleanúint naisc, is féidir linn an event.preventDefault() modh a ghlaoch.

Sampla:

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

Trí thuiscint a fháil ar conas imeachtaí a láimhseáil i React, is féidir leat comhéadain úsáideora idirghníomhacha agus sofhreagracha a chruthú a fhreagraíonn gan uaim do ghníomhaíochtaí úsáideoirí

 

Seo liosta imeachtaí coitianta i React

1. onClick: Tarlaíonn an teagmhas seo nuair a chliceáiltear eilimint.

Sampla:

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

2. onChange: Tarlaíonn an teagmhas seo nuair a athraíonn luach eilimint ionchuir(ionchur, roghnaigh, raon téacs).

Sampla:

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

3. onSubmit: Tarlaíonn an teagmhas seo nuair a chuirtear foirm isteach. Sampla:

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

4. onMouseEnter: Tarlaíonn an teagmhas seo nuair a chuireann an pointeoir luiche isteach eilimint.

Sampla:

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

5. onMouseLeave: Tarlaíonn an teagmhas seo nuair a fhágann an pointeoir luiche eilimint.

Sampla:

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

6. onKeyDown: Tarlaíonn an teagmhas seo nuair a bhrúitear eochair síos.

Sampla:

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

7. onKeyUp: Tarlaíonn an teagmhas seo nuair a scaoiltear eochair.

Sampla:

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

8. onFocus: Tarlaíonn an teagmhas seo nuair a fhaigheann eilimint fócas.

Sampla:

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

9. onBlur: Tarlaíonn an teagmhas seo nuair a chailleann eilimint fócas.

Sampla:

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

10. onScroll: Tarlaíonn an teagmhas seo nuair a scrollaítear dúil.

Sampla:

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

 

Níl anseo ach roinnt samplaí d'imeachtaí coitianta i React. Is féidir leat na himeachtaí seo a úsáid nó imeachtaí saincheaptha a chruthú de réir do riachtanas i d’ React iarratas.