আপনি যদি ES6 ব্যবহার করে থাকেন তবে এখানে কয়েকটি সাধারণ উদাহরণ কোড রয়েছে:
import React from 'wherever_react_is';
class TestApp extends React.Component {
getComponent(event) {
console.log('li item clicked!');
event.currentTarget.style.backgroundColor = '#ccc';
}
render() {
return(
<div>
<ul>
<li onClick={this.getComponent.bind(this)}>Component 1</li>
</ul>
</div>
);
}
}
export default TestApp;
ES6 শ্রেণীর সংস্থায়, ফাংশনগুলির জন্য আর 'ফাংশন' কীওয়ার্ডের প্রয়োজন হয় না এবং তাদের কমা দ্বারা আলাদা করার প্রয়োজন হয় না। আপনি ইচ্ছে করলে => সিনট্যাক্সটিও ব্যবহার করতে পারেন।
গতিশীলভাবে তৈরি উপাদানগুলির সাথে এখানে একটি উদাহরণ রয়েছে:
import React from 'wherever_react_is';
class TestApp extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{name: 'Name 1', id: 123},
{name: 'Name 2', id: 456}
]
}
}
getComponent(event) {
console.log('li item clicked!');
event.currentTarget.style.backgroundColor = '#ccc';
}
render() {
<div>
<ul>
{this.state.data.map(d => {
return(
<li key={d.id} onClick={this.getComponent.bind(this)}>{d.name}</li>
)}
)}
</ul>
</div>
);
}
}
export default TestApp;
নোট করুন যে প্রতিটি গতিশীলভাবে তৈরি উপাদানটির একটি অনন্য রেফারেন্স 'কী' হওয়া উচিত।
তদ্ব্যতীত, আপনি যদি নিজের অন ক্লিক ফাংশনে প্রকৃত ডেটা অবজেক্ট (ইভেন্টের চেয়ে) পাস করতে চান তবে আপনাকে এটি আপনার বাইন্ডে পাস করতে হবে। উদাহরণ স্বরূপ:
নতুন অনক্লিক ফাংশন:
getComponent(object) {
console.log(object.name);
}
ডেটা অবজেক্টে পাস করা:
{this.state.data.map(d => {
return(
<li key={d.id} onClick={this.getComponent.bind(this, d)}>{d.name}</li>
)}
)}
event.currentTarget.style.backgroundColor = '#ccc';আপনি কী করছেন (আপনি তৃতীয় পক্ষের উইজেটগুলিকে একীভূত করার সময় বেশিরভাগ সময়) সত্যই বুঝতে না পারলে এ জাতীয় জিনিস এড়িয়ে চলুন ।