React中select下拉菜单onClick事件不触发问题求解

• 第一种写法不符合HTML语法规则：<select> 仅允许 <option>、<optgroup> 作为合法子元素，直接嵌套 <button> 会被浏览器渲染引擎自动过滤、移位，绑定的事件完全无法生效。
• 第二种写法事件绑定对象错误：原生 <option> 元素不支持 onClick 事件，这是HTML标准的通用限制，和React框架无关，点击选项时绑定在option上的点击事件不会正常触发，状态更新逻辑自然不执行。

下拉选择的变更事件需要绑定在外层 <select> 标签上，通过onChange监听选中行为，再从事件对象中获取选中值更新state，同时给每个<option>配置对应的value属性即可：

<div className='dropDownDiv'>
  <select
    onChange={(e) => setResultsPerPage(Number(e.target.value))}
    defaultValue={6}
  >
    <option value={6}>6 Results</option>
    <option value={9}>9 Results</option>
    <option value={15}>Max sites</option>
  </select>
</div>

如果要做受控组件，把上面的defaultValue替换为value={resultsPerPage}，和state值做双向绑定即可。

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