React中下拉框首个选项无法提交的问题求助

你遇到的这个问题核心原因是：页面加载后第一个选项默认选中时，没有触发onChange事件，导致categoryId状态未被更新，提交表单时自然无法把第一个选项的值传给后端。下面给你几个可行的解决方案：

方案1：初始化状态时预设首个选项的值 #

在获取下拉框数据后，直接把第一个选项的id赋值给categoryId状态，确保页面加载完成后状态就有正确的初始值：

fetchOptions() { 
  fetch("https://localhost:44341/api/categories") 
    .then(res => res.json()) 
    .then(json => { 
      this.setState({ 
        obj: json,
        // 如果有数据就取第一个的id，否则设为null/undefined
        categoryId: json.length > 0 ? parseInt(json[0].id) : null 
      }); 
    }); 
}

这样不管用户有没有手动选择第一个选项，categoryId的状态都是正确的，提交时就能正常传值。

方案2：改用受控组件（推荐） #

React推荐使用受控组件来管理表单元素，这样视图和状态始终保持同步，还能避免使用findDOMNode这类不推荐的DOM操作方式。修改代码如下：

优化变更处理方法 #

handleCatChange(e) { 
  // 直接通过事件对象获取选中值，无需DOM查找
  this.setState({ categoryId: parseInt(e.target.value) }); 
}

改造下拉框为受控组件 #

<div className="drop-down"> 
  <select 
    value={this.state.categoryId} // 绑定状态值，让select受控
    onChange={this.handleCatChange.bind(this)} // 绑定this（也可以用箭头函数）
    style={{ width: "82%" }} 
  > 
    {this.state.obj.map(obj => { 
      return ( 
        <option key={obj.id} value={obj.id} > 
          {obj.categoryName} 
        </option> 
      ); 
    })} 
  </select> 
</div>

同样记得在fetchOptions里初始化categoryId为第一个选项的id，这样组件加载完成后，状态和视图就完全同步了，任何选项的选中都会触发状态更新，提交时自然不会有问题。

方案3：提交时主动获取当前选中值（备选） #

如果暂时不想调整状态逻辑，也可以在表单提交时直接读取下拉框的当前值，而不是依赖categoryId状态：

handleSubmit() {
  // 直接从ref获取当前选中值
  const selectedCategoryId = parseInt(this.refs.categoryId.value);
  // 使用selectedCategoryId作为参数提交到后端
}

不过这种方式不符合React的状态管理理念，只适合临时快速解决问题，长期来看推荐使用方案2。

补充说明 #

为什么只有第一个选项出问题？因为页面加载时浏览器会默认选中第一个<option>，但这个默认选中动作不会触发你绑定的onChange事件，所以你的categoryId状态始终是初始值（比如undefined），提交时后端就收不到这个值；而当你手动选择其他选项时，会触发onChange，状态被更新，所以能正常提交。

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