উত্তর:
এটা চেষ্টা কর:
<button onClick={(e) => {
this.clickMe(e, someParameter)
}}>Click Me!</button>
এবং আপনার ফাংশনে:
function clickMe(event, someParameter){
//do with event
}
data-*এইচটিএমএল 5 এর বৈশিষ্ট্যগুলি ব্যবহার করা সবচেয়ে ভাল সমাধান । আরও তথ্যের জন্য দয়া করে নীচে আমার উত্তর দেখুন।
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-* এইচটিএমএল 5 বৈশিষ্ট্যগুলি হ'ল সেরা সমাধান আইএমও। যেহেতু দিনের শেষে, আপনি পরামিতিগুলি পাস করার জন্য একটি উপ-উপাদানটি বের করে নিলেও এটি এখনও নতুন ফাংশন তৈরি করে।
উদাহরণ স্বরূপ,
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?foutsize=14&hidenavication =1& theme=dark
event.persist()সঙ্গে console.log(event)কিন্তু আমি সঙ্গে এটি প্রয়োজন হবে না console.log(event.target)?
let event;এটি একটি অপরিজ্ঞাত ত্রুটি নিক্ষেপ করবে।
onClick={(e) => { this.clickMe(e, someparameter) }}