كيف يمكن تمرير قيمة لـ onClick event في مكون React؟

هناك طريقتين لتمرير الدالة لل onClick event :

الطريقة المعمول بها الان

هذه الطريقة عيبها أنها في كل حدث ضغط تقوم بانشاء دالة جديدة وهذا يسبب اعادة تشغيل للمكون غير ضرورية 

return (
  <button onClick={() => this.handleClick(value)}> Content </button>
);

الطريقة القديمة 

return (
  <button onClick={this.handleClick.bind(this,value)}> Content </button>
);

يمكنك استخدام arrow function في الجزء التالي لحل المشكلة.

handleClick = (item) => (e) => {
  e.preventDefault()    
  console.log(`This has access to item ${item}! and event(e)`)
}

.

return (
  <button onClick={() => this.handleClick(item)}> Content </button>
);

بهذه الحالة سيتم إنشاء دالة أخرى تقوم باستدعاء handleClick الخاص بك