Abubuwan da ke faruwa suna taka muhimmiyar rawa wajen ƙirƙirar mu'amala mai ƙarfi da kuzari a cikin React. A cikin wannan koyawa, za mu bincika yadda ake sarrafa abubuwan da ke faruwa a ciki React da kuma amsa ayyukan mai amfani yadda ya kamata.
Gudanar da Taron a JSX
React yana ba da tsarin taron na roba wanda ke kunshe abubuwan da suka faru na gidan yanar gizo da kuma daidaita su a cikin masu bincike daban-daban. Za mu iya haɗa masu gudanar da taron kai tsaye zuwa abubuwan JSX ta amfani da onEventName sifa.
Misali:
function handleClick() {
console.log("Button clicked!");
}
<button onClick={handleClick}>Click Me</button>
Masu Gudanar Da Biki da Abubuwan Abubuwan Biki
Lokacin da abin ya faru, React yana wuce abu ta atomatik zuwa aikin mai sarrafa taron. Za mu iya samun damar wannan abu don samun ƙarin bayani game da taron, kamar nau'in manufa, haɗin linzamin kwamfuta, da sauransu.
Misali:
function handleMouseOver(event) {
console.log("Mouse coordinates:", event.clientX, event.clientY);
}
<div onMouseOver={handleMouseOver}>Hover over me</div>
Daure Masu Gudanar Da Bikin Bidiyo
Lokacin wucewa masu gudanar da taron a matsayin abin dogaro, yana da mahimmanci a ɗaure su da misalin ɓangaren. Wannan yana tabbatar da cewa an kiyaye madaidaicin this mahallin lokacin da abin ya faru.
Misali:
class MyComponent extends React.Component {
handleClick() {
console.log("Button clicked!");
}
render() {
return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
}
}
Yada Abubuwan da ke faruwa da Hana Tsoffin Ayyuka
React yana amfani da tsarin taron na roba wanda ke sarrafa yaɗuwar taron ta atomatik. Don hana tsohowar dabi'ar burauza, kamar ƙaddamar da fom ko kewayawa ta hanyar haɗin gwiwa, zamu iya kiran event.preventDefault() hanyar.
Misali:
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>Ta hanyar fahimtar yadda ake gudanar da abubuwan da suka faru a cikin React, zaku iya ƙirƙirar mu'amala mai mu'amala da mai amfani waɗanda ke ba da amsa ga ayyukan mai amfani ba tare da matsala ba.
Anan akwai jerin abubuwan gama gari a ciki React
1. onClick: Wannan lamari yana faruwa ne lokacin da aka danna wani abu.
Misali:
<button onClick={handleClick}>Click Here</button> 2. onChange: Wannan lamari yana faruwa ne lokacin da darajar abin shigarwa(shigarwa, zaɓi, yanki) ta canza.
Misali:
<input type="text" onChange={handleChange} /> 3. onSubmit: Wannan lamari yana faruwa ne lokacin da aka ƙaddamar da fom. Misali:
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form> 4. onMouseEnter: Wannan lamari yana faruwa ne lokacin da mai nuna linzamin kwamfuta ya shiga wani abu.
Misali:
<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div> 5. onMouseLeave: Wannan lamari yana faruwa ne lokacin da ma'anar linzamin kwamfuta ta bar wani abu.
Misali:
<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div> 6. onKeyDown: Wannan lamari yana faruwa ne lokacin da aka danna maɓalli.
Misali:
<input type="text" onKeyDown={handleKeyDown} /> 7. onKeyUp: Wannan lamari yana faruwa ne lokacin da aka saki maɓalli.
Misali:
<input type="text" onKeyUp={handleKeyUp} /> 8. onFocus: Wannan taron yana faruwa ne lokacin da wani abu ya sami hankali.
Misali:
<input type="text" onFocus={handleFocus} /> 9. onBlur: Wannan lamari yana faruwa ne lokacin da wani abu ya rasa hankali.
Misali:
<input type="text" onBlur={handleBlur} /> 10. onScroll: Wannan lamari yana faruwa ne lokacin da aka gungura wani abu.
Misali:
<div onScroll={handleScroll}>Scrollable Content</div>
Waɗannan wasu misalai ne na al'amuran gama gari a cikin React. Kuna iya amfani da waɗannan abubuwan ko ƙirƙirar al'amuran al'ada bisa ga bukatunku a cikin React aikace-aikacenku.