React表单中select国家选择组件onChange监听事件不触发问题

触发异常的常见原因 #

• 所用UI框架的Form组件默认拦截了表单元素事件：你当前用的带<Form.Group>的UI库（大概率是React Bootstrap），Form组件本身做了全局表单事件托管，原生<select>绑定的onChange优先级低于Form的全局监听，事件被拦截无法触发。
• 动态渲染的option未添加唯一key属性：你的代码中countries.map遍历返回option节点时没有配置key，React虚拟DOM重渲染时容易出现节点匹配错误，导致事件绑定失效。
• 页面存在上层元素遮挡：点击下拉选项时实际触发的是上层不可见元素的事件，没有触达select本身。
• select被配置为受控组件但value未同步更新：如果给select绑定了固定的value属性，选中后value没有同步更新的话，React会判定组件值未发生变化，不会触发onChange事件。

对应解决方法 #

1. 优先使用UI库内置的Select组件替换原生select

你所用的UI库已经提供了和Form组件兼容的Select控件，直接替换原生<select>标签即可解决事件拦截问题，同时给option补充key属性，修改后代码如下：

<Form.Group className="form-group">
  <Form.Label htmlFor="country">Country</Form.Label>
  <div className="form-control-wrap">
    <Form.Select 
      className="form-select form-select-lg" 
      id="country" 
      name="country"
      onChange={e => console.log("Changed")}
    >
      <option value="select-country">Select Country</option>
      {
        countries.map((c) => {
          // 补充唯一key，优先用国家id，没有的话用不重复的名称
          return (<option key={c.name} value={c.name}>{c.name}</option>)
        })
      }
    </Form.Select>
  </div>
</Form.Group>

2. 不想替换组件的话可以手动阻止事件冒泡，给select的onChange回调加上e.stopPropagation()，避免事件被上层Form组件拦截。
3. 打开浏览器开发者工具的元素检查器，点击下拉选择框确认选中的是目标select节点，要是有上层遮挡元素，调整z-index层级或者删除多余遮罩。
4. 如果select配置了value属性，要确保onChange回调中同步更新绑定的value状态，否则会因为值未变更导致onChange不触发。

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