React中无法取消勾选复选框，能否复用现有handleChange方法？

嘿，我来帮你搞定这个问题～

你遇到的核心问题是：当前的handleChange方法只处理了输入框的e.target.value，但复选框的选中状态对应的是布尔类型的e.target.checked，不是value，所以导致复选框一直处于勾选状态，没法正常更新state。

不需要新建方法，扩展现有handleChange就可以！ #

我们可以在方法里判断一下目标元素的类型，针对复选框和普通输入框分别取值：

handleChange = input => e => {
  // 区分复选框和普通输入框的取值逻辑
  const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
  this.setState({ [input]: value });
};

原组件代码无需改动 #

你原来的输入框和复选框代码保持原样就行，现在这个handleChange能同时处理两种类型的输入了：

<input 
  className="col-sm-12" 
  type="email" 
  placeholder="Email" 
  onChange={handleChange('billingEmail')} 
  defaultValue={values.billingEmail} 
/>
<label className="col-sm-12" style={{paddingLeft: "0"}}>
  <input 
    type="checkbox" 
    checked={values.billingAddressSame} 
    onChange={handleChange('billingAddressSame')} 
  />
  Same as company address
</label>

这样调整后，复选框的billingAddressSame状态就能正确切换布尔值，勾选状态也会跟着更新啦～

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