React多步表单子步骤复选框点击无法设置为true的问题

复选框无法正常选中是两处代码错误共同导致的，其余文本输入框不受影响所以能正常工作：

• 复选框的name属性和父组件state字段不匹配：父组件存储勾选状态的state字段名为checkbox，但子组件里复选框写的是name="controlled"，触发变更时无法定位到要更新的state字段。
• 通用变更处理方法未适配复选框逻辑：现有handleChange方法统一读取event.target.value赋值，但复选框的选中状态存储在event.target.checked属性中，返回的是布尔值；如果强行取value，拿到的是默认字符串值"on"，永远无法正确更新布尔类型的勾选状态。

1. 修正复选框的name属性 #

打开FormStep1组件，找到WhatsApp勾选框的input标签，将name属性值改为和state字段一致的checkbox：

<input
    className="form-check-input" 
    id="wppCheckbox"
    name="checkbox" // 原value为"controlled"，修改为和state字段对齐
    type="checkbox" 
    checked={props.checkbox} 
    onChange={props.handleChange} 
/>

2. 适配handleChange方法的复选框处理逻辑 #

打开父组件VendeForm，修改handleChange方法，根据输入框类型区分取值逻辑，不影响原有文本输入框的正常功能：

handleChange = event => {
  const { name, type, value, checked } = event.target
  this.setState({
    // 复选框类型取checked布尔值，其余输入控件取value值
    [name]: type === 'checkbox' ? checked : value
  })    
}

改完后保存刷新，复选框即可正常切换选中状态，提交时也能正确拿到对应的布尔值。

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