React中如何将Checkbox状态传递给onClick函数？

嘿，我完全懂你现在的困扰——本来以为简单的复选框状态传递，结果卡在了既要拿到选中状态，又要带上objectA、objectB这些自定义参数的环节，而且还不想用麻烦的refs，对吧？其实有两种超简洁的方案，咱们直接看代码：

方案1：箭头函数直接传递event与自定义参数 #

这是最直观的方式，你只需要在箭头函数里接收event参数，然后把event.target.checked和你的自定义参数一起传给buildTemplate就行，完美适配你现有的函数结构：

<input 
  type="checkbox" 
  name={field} 
  id={field} 
  onClick={(event) => this.buildTemplate(objectA, objectB, event.target.checked)} 
/> 
<label htmlFor={field}> {getLabel(`${this.props.modelType}.${fieldName}`)} </label>

你的buildTemplate函数不用做任何修改，就能直接拿到checked状态和另外两个对象：

buildTemplate = (objectA, objectB, checked) => { 
  checked ? yep() : nope(); 
};

方案2：用bind绑定前置参数，接收event #

如果你不想在render里用箭头函数（虽然大多数场景下性能影响可以忽略），可以调整下buildTemplate的参数顺序，把event放在最后，然后用bind提前绑定自定义参数：

// 先调整函数参数顺序，把event放在末尾
buildTemplate = (objectA, objectB, event) => {
  const checked = event.target.checked;
  checked ? yep() : nope();
};

然后在复选框的onClick里绑定参数：

<input 
  type="checkbox" 
  name={field} 
  id={field} 
  onClick={this.buildTemplate.bind(this, objectA, objectB)} 
/> 

这里bind会把objectA和objectB作为前两个参数绑定到函数上，当复选框被点击时，React会自动把event作为第三个参数传进来，你就能从中拿到选中状态了。

为什么之前的bind方法没生效？ #

你之前尝试的this.testFunc.bind(this)只绑定了this上下文，没有传递自定义参数。现在通过bind(this, param1, param2)的方式，就能把需要的参数提前绑定，再接收事件对象，就解决了参数传递的问题。

完全不用考虑refs，这两种方法都能轻松应对多个复选框的场景，代码简洁又好维护～

内容的提问来源于stack exchange，提问作者Matthias Wünsch