React.js中如何获取表单内select标签的选中值

问题原因 #

你的<select>标签没有配置受控组件必要的属性，无法和你定义的newUser状态联动：

• 没有添加name="identity"属性，handleChange无法识别要更新状态中的对应字段
• 没有绑定value={newUser.identity}做值同步
• 没有绑定onChange={handleChange}触发状态更新

修复方案 #

把原代码中的<select>部分替换为如下代码即可：

<select
  name="identity"
  value={newUser.identity}
  onChange={handleChange}
>
  <option value="student">Student</option>
  <option value="teacher">Teacher</option>
</select>

补充提示 #

React中指定DOM元素的类名需要使用className属性而非class，否则会抛出语法警告，你可以批量替换代码中所有的class=为className=规避该问题。

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