function clickMe(e){
//e is the event
}
<button onClick={this.clickMe}></button>
function clickMe(parameter){
//how to get the "e" ?
}
<button onClick={() => this.clickMe(someparameter)}></button>
मैं पाना चाहता हूं event। मैं इसे कैसे प्राप्त कर सकता हूँ?
जवाबों:
इसे इस्तेमाल करे:
<button onClick={(e) => {
this.clickMe(e, someParameter)
}}>Click Me!</button>
और अपने समारोह में:
function clickMe(event, someParameter){
//do with event
}
data-*HTML5 में विशेषताओं का उपयोग करने के लिए सबसे अच्छा समाधान है । कृपया अधिक जानकारी के लिए नीचे मेरा जवाब देखें।
ES6 के साथ, आप इस तरह से छोटे तरीके से कर सकते हैं:
const clickMe = (parameter) => (event) => {
// Do something
}
और इसका उपयोग करें:
<button onClick={clickMe(someParameter)} />
onClick={(e) => clickMe(someParameter)(e)}
const clickMe = (parameter) => (event) => {...} इसके बजाय क्यों है const clickMe = (parameter) => {...}?
समाधान 1
function clickMe(parameter, event){
}
<button onClick={(event) => {this.clickMe(someparameter, event)}></button>
समाधान 2 बाइंड फ़ंक्शन का उपयोग करना बेहतर माना जाता है, एरो फ़ंक्शन तरीका, समाधान 1 में। ध्यान दें, कि ईवेंट पैरामीटर हैंडलर फ़ंक्शन में अंतिम पैरामीटर होना चाहिए
function clickMe(parameter, event){
}
<button onClick={this.clickMe.bind(this, someParameter)}></button>
नई कॉलबैक समस्या को पूरी तरह से हल करने के लिए, data-*HTML5 में विशेषताओं का उपयोग करना सबसे अच्छा समाधान IMO है। चूंकि दिन के अंत में, भले ही आप मापदंडों को पारित करने के लिए एक उप-घटक निकालते हैं, फिर भी यह नए कार्यों का निर्माण करता है।
उदाहरण के लिए,
const handleBtnClick = e => {
const { id } = JSON.parse(e.target.dataset.onclickparam);
// ...
};
<button onClick={handleBtnClick} data-onclickparam={JSON.stringify({ id: 0 })}>
विशेषताओं का उपयोग करने के लिए https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes देखें data-*।
ES6 उदाहरण के साथ करी :
const clickHandler = param => event => {
console.log(param); // your parameter
console.log(event.type); // event type, e.g.: click, etc.
};
हमारे बटन, कि टॉगल हैंडलर:
<button onClick={(e) => clickHandler(1)(e)}>Click me!</button>
यदि आप किसी इवेंट ऑब्जेक्ट के बिना इस फ़ंक्शन को कॉल करना चाहते हैं, तो आप इसे इस तरह से कॉल करेंगे:
clickHandler(1)();
इसके अलावा, चूंकि प्रतिक्रिया सिंथेटिक घटनाओं (देशी घटनाओं के लिए एक आवरण) का उपयोग करती है, इसलिए एक घटना पूलिंग चीज़ है, जिसका अर्थ है, यदि आप अपनी eventवस्तु को अतुल्यकालिक रूप से उपयोग करना चाहते हैं , तो आपको उपयोग करना होगा event.persist():
const clickHandler = param => event => {
event.persist();
console.log(event.target);
setTimeout(() => console.log(event.target), 1000); // won't be null, otherwise if you haven't used event.persist() it would be null.
};
यहाँ लाइव उदाहरण है: https://codesandbox.io/s/compassionate-joliot-4eblc?fontsize=14&hidenavigation=1&theme=dark
event.persist()के साथ console.log(event)है, लेकिन मैं के साथ इसकी आवश्यकता नहीं है console.log(event.target)?
let event;तो यह नहीं होते एक अपरिभाषित त्रुटि फेंक देते हैं।
onClick={(e) => { this.clickMe(e, someparameter) }}