ReactJS中如何为onclick属性的函数传递参数？

你遇到的问题本质是：onClick={removeTask(this)} 会立即执行removeTask函数（因为这是函数调用语句），而不是把它作为点击事件的回调函数。下面是几种可行的解决办法：

方法1：用匿名箭头函数包裹回调 #

这是最直观的方式，点击事件触发时才会执行内部的函数调用，同时可以传递你需要的参数：

<input type='checkbox' name="doneTask" value='done' onClick={() => removeTask(this)}/>

如果你的目标是传递复选框元素本身（而非当前上下文的this），可以通过事件对象的target属性获取：

<input type='checkbox' name="doneTask" value='done' onClick={(e) => removeTask(e.target)}/>

方法2：使用bind绑定参数 #

bind方法会返回一个新的函数，不会立即执行，同时可以预先绑定需要传递的参数：

<input type='checkbox' name="doneTask" value='done' onClick={removeTask.bind(this, this)}/>

这里第一个this是设置removeTask函数内部的this指向（如果不需要可以传null），第二个this是你要传递给函数的参数。如果要传递复选框元素，同样可以结合事件对象，或者在函数内部通过event.target获取元素。

方法3：在回调函数中通过事件对象获取元素 #

如果你不需要额外传递自定义参数，也可以直接把removeTask作为回调，然后在函数内部通过事件参数获取目标元素：

<input type='checkbox' name="doneTask" value='done' onClick={removeTask}/>

修改你的函数：

function removeTask(e){
  const elem = e.target; // 这里elem就是复选框元素
  // 你的逻辑代码
}

内容的提问来源于stack exchange，提问作者9ust00learn