在React中如何获取radio单选按钮选中值并存入inputs.reply字段？

问题原因 #

你当前的handleOnChange逻辑是用输入元素的id作为inputs对象的键名存储值，而三个单选按钮的id分别是reply-phone、reply-email、no-reply，所以选中后值会被存到这三个独立的key下，不会写入inputs.reply。

解决方案 #

总共需要修改三处代码：

1. 调整三个单选按钮的属性，统一name为reply，同时添加checked绑定确保状态同步：

<div className="form-group form-group-radio">
  <div>
    <input 
      type="radio" 
      onChange={handleOnChange} 
      value="Phone" 
      name="reply" 
      id="reply-phone"
      checked={inputs.reply === 'Phone'}
    />  
    <label className="radio-label" htmlFor="reply-phone">Phone</label>
  </div>
  <div>
    <input 
      type="radio" 
      onChange={handleOnChange} 
      value="E-mail" 
      name="reply" 
      id="reply-email"
      checked={inputs.reply === 'E-mail'}
    />  
    <label className="radio-label" htmlFor="reply-email">E-mail</label>
  </div>
  <div>
    <input 
      type="radio" 
      onChange={handleOnChange} 
      value="No reply needed" 
      name="reply" 
      id="no-reply"
      checked={inputs.reply === 'No reply needed'}
    />  
    <label className="radio-label" htmlFor="no-reply">No reply needed</label>
  </div>
</div>

2. 修改handleOnChange的键名取值逻辑，从取e.target.id改为取e.target.name，你的其他输入项name和id原本一致，不会影响原有逻辑：

const handleOnChange = e => {
  e.persist()
  setInputs(prev => ({
    ...prev,
    [e.target.name]: e.target.value
  }))
  setStatus({
    submitted: false,
    submitting: false,
    info: { error: false, msg: null }
  })
}

3. 给textarea补充name="message"属性，保持和id一致：

<textarea
  id="message"
  name="message"
  onChange={handleOnChange}
  required
  value={inputs.message}
  className={inputs.message ? "form-control active" : "form-control"}
/>

修改完成后，单选按钮的选中值就会自动存入inputs.reply，和其他字段的处理逻辑完全统一，提交时也会正常携带reply字段。

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