L-avvenimenti għandhom rwol vitali fil-ħolqien ta' interfaces tal-utent interattivi u dinamiċi f' React. F'dan it-tutorja, se nesploraw kif nittrattaw l-avvenimenti React u nirrispondu għall-azzjonijiet tal-utent b'mod effettiv.
Immaniġġjar ta 'avvenimenti f'JSX
React jipprovdi sistema ta 'avvenimenti sintetiċi li tgeżwer l-avvenimenti tal-brawżer indiġeni u jinnormalizzahom fuq browsers differenti. Nistgħu nehmeż l-immaniġġjar tal-avvenimenti direttament ma 'elementi JSX billi tuża l- onEventName attribut.
Eżempju:
function handleClick() {
console.log("Button clicked!");
}
<button onClick={handleClick}>Click Me</button>
Amministraturi ta' Avvenimenti u Oġġetti ta' Avvenimenti
Meta avveniment jiġi attivat, React awtomatikament jgħaddi oġġett tal-avveniment lill-funzjoni tal-immaniġġjar tal-avvenimenti. Nistgħu naċċessaw dan l-oġġett biex niksbu informazzjoni addizzjonali dwar l-avveniment, bħal element fil-mira, koordinati tal-maws, eċċ.
Eżempju:
function handleMouseOver(event) {
console.log("Mouse coordinates:", event.clientX, event.clientY);
}
<div onMouseOver={handleMouseOver}>Hover over me</div>
Immaniġġjaturi ta' Avvenimenti vinkolanti
Meta tgħaddi l-handlers tal-avvenimenti bħala props, huwa importanti li jorbothom mal-istanza tal-komponent. Dan jiżgura li l- this kuntest korrett jinżamm meta l-avveniment jiġi attivat.
Eżempju:
class MyComponent extends React.Component {
handleClick() {
console.log("Button clicked!");
}
render() {
return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
}
}
Propagazzjoni ta' Avvenimenti u Prevenzjoni ta' Azzjonijiet ta' Default
React juża sistema ta 'avvenimenti sintetiċi li awtomatikament jimmaniġġjaw il-propagazzjoni ta' l-avvenimenti. Biex tipprevjeni l-imġieba default tal-browser, bħas-sottomissjoni tal-formola jew in-navigazzjoni tal-link, nistgħu nsejħu l- event.preventDefault() metodu.
Eżempju:
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>Billi tifhem kif timmaniġġja l-avvenimenti fi React, tista 'toħloq interfaces tal-utent interattivi u reattivi li jirrispondu bla xkiel għall-azzjonijiet tal-utent
Hawnhekk hawn lista ta’ avvenimenti komuni fi React
1. onClick: Dan l-avveniment iseħħ meta jiġi kklikkjat element.
Eżempju:
<button onClick={handleClick}>Click Here</button> 2. onChange: Dan l-avveniment iseħħ meta l-valur ta 'element ta' input(input, select, textarea) jinbidel.
Eżempju:
<input type="text" onChange={handleChange} /> 3. onSubmit: Dan l-avveniment iseħħ meta tiġi sottomessa formola. Eżempju:
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form> 4. onMouseEnter: Dan l-avveniment iseħħ meta l-pointer tal-maws jidħol f'element.
Eżempju:
<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div> 5. onMouseLeave: Dan l-avveniment iseħħ meta l-pointer tal-maws iħalli element.
Eżempju:
<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div> 6. onKeyDown: Dan l-avveniment iseħħ meta ċavetta tingħafas 'l isfel.
Eżempju:
<input type="text" onKeyDown={handleKeyDown} /> 7. onKeyUp: Dan l-avveniment iseħħ meta ċavetta tiġi rilaxxata.
Eżempju:
<input type="text" onKeyUp={handleKeyUp} /> 8. onFocus: Dan l-avveniment iseħħ meta element jirċievi fokus.
Eżempju:
<input type="text" onFocus={handleFocus} /> 9. onBlur: Dan l-avveniment iseħħ meta element jitlef il-fokus.
Eżempju:
<input type="text" onBlur={handleBlur} /> 10. onScroll: Dan l-avveniment iseħħ meta element jiġi skrolljat.
Eżempju:
<div onScroll={handleScroll}>Scrollable Content</div>
Dawn huma biss xi eżempji ta’ ġrajjiet komuni fil- React. Tista' tuża dawn l-avvenimenti jew toħloq avvenimenti personalizzati skont il-bżonnijiet tiegħek fl- React applikazzjoni tiegħek.