प्रतिक्रिया onClick समारोह आग पर प्रस्तुत करना

Question

मैं एक बच्चे के घटक के लिए 2 मान पास:

1. वस्तुओं की सूची
2. हटाने समारोह प्रदर्शित करने के लिए।

मैं वस्तुओं की सूची को प्रदर्शित करने के लिए (में दिए गए उदाहरण की तरह ट्यूटोरियल पेज प्रतिक्रिया) (में एक .map() फ़ंक्शन का उपयोग करें, लेकिन यह है कि घटक में बटन onClick समारोह आग, प्रस्तुत करना पर गोली नहीं करना चाहिए समय प्रस्तुत करने पर)। मेरे कोड इस तरह दिखता है:

module.exports = React.createClass({ 
    render: function(){ 
     var taskNodes = this.props.todoTasks.map(function(todo){ 
      return (
       <div> 
        {todo.task} 
        <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button> 
       </div> 
      ); 
     }, this); 
     return (
      <div className="todo-task-list"> 
       {taskNodes} 
      </div> 
     ); 
    } 
}); 

मेरा प्रश्न है: क्यों करता है मेरा प्रस्तुत करना पर समारोह आग onclick और कैसे यह नहीं करने के लिए बनाने के लिए।

Answer 1

क्योंकि आपको लगता है कि समारोह बुला रहे हैं के बजाय onClick को समारोह गुजर, इस लिए कि लाइन बदलने के लिए:

<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button> 

=> तीर समारोह है, जो ES6 में पेश किया गया था, और पर समर्थन किया जाएगा बुलाया 0.13.3 या ऊपरी प्रतिक्रिया दें।

Answer 2

इसके बजाय फ़ंक्शन को कॉल की, कार्य करने के लिए मूल्य के लिए बाध्य:

this.props.removeTaskFunction.bind(this, todo) 

MDN रेफरी: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

Answer 3

मूल्य अपने onClick विशेषता के लिए एक समारोह, नहीं एक समारोह कॉल किया जाना चाहिए।

<button type="submit" onClick={function(){removeTaskFunction(todo)}}>Submit</button>