React.js中如何获取表单gender字段值并在点击更新按钮时展示

解决方法 #

• 首先处理类型匹配问题：数据库存储的gender是数字类型的0/1，但表单单选框默认取到的value是字符串类型，'1' === 1 判定为false会直接导致选中态不生效、取值匹配失败。
• 渲染单选框时，checked判定要和state中存储的gender类型严格对应，示例代码：

<input type="radio" name="gender" value="1" checked={this.state.gender === 1} onChange={this.handleGenderChange} /> 男
<input type="radio" name="gender" value="0" checked={this.state.gender === 0} onChange={this.handleGenderChange} /> 女

• 同步state的change事件中，要把拿到的表单value转成数字再存储：

handleGenderChange = (e) => {
  this.setState({
    gender: Number(e.target.value)
  })
}

• 拿到后端返回的用户数据填充表单时，也要先把gender字段转成数字再赋值给state：

this.setState({
  // 其他表单字段赋值
  gender: Number(res.data.gender)
})

• 点击更新按钮取值时，优先直接从state中取gender字段即可，不需要额外操作DOM获取表单值。

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