React中如何设置Option默认选中？使用this.state代码报错求助

嘿，我来帮你搞定这个React下拉框默认选中的问题！

你当前的代码里犯了一个React表单组件的常见小错误：同时用了<select>的value属性和<option>的selected属性，这在React的受控组件模式下会造成冲突，而且这也不是React推荐的用法。另外你提到this.state.editusertype报错，大概率是因为你没有在组件里正确初始化这个state属性。

下面给你一步步的解决方案：

第一步：确保state正确初始化 #

在你的类组件构造函数里，一定要先初始化editusertype这个state值，比如你想默认选中"Employee"，就这么写：

constructor(props) {
  super(props);
  // 初始化state，设置默认选中的值
  this.state = {
    editusertype: "Employee"
  };
}

如果想默认显示"Select"选项，就把初始值设为空字符串""。

第二步：修改下拉框代码，用受控组件方式控制选中状态 #

React的受控组件会通过<select>的value属性自动匹配对应的<option>，完全不需要手动给option加selected判断。修正后的代码如下：

<select name="usertype" className="form-control" value={this.state.editusertype}>
  <option value="">Select</option>
  <option value="Employee">Employee</option>
  <option value="Manager">Manager</option>
</select>

这样只要this.state.editusertype的值和某个option的value一致，那个option就会自动被选中，完美解决默认选中的问题，也不会有冲突报错。

可选：非受控组件的默认选中方式 #

如果你不需要实时监听下拉框的选中值变化，也可以用非受控组件的defaultValue属性来设置默认选中：

<select name="usertype" className="form-control" defaultValue={this.state.editusertype}>
  <option value="">Select</option>
  <option value="Employee">Employee</option>
  <option value="Manager">Manager</option>
</select>

这种方式不需要维护state的变化，适合简单场景。

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