React下拉框select组件onSelect事件不触发问题求助

问题根源 #

你给<select>标签绑定了错误的事件：

• React 中onSelect是文本选中触发事件，仅当用户在<input>、<textarea>或普通文本内容中框选选中部分文字时才会触发，和下拉框选择选项的行为无关
• 下拉框选择选项对应的触发事件是onChange

修复方案 #

把<select>标签的onSelect属性改为onChange即可，修改后的代码参考：

import React,{useState} from 'react';
import SEPractices from "../dummydata/SEPractices"

const optionItems = SEPractices.map((SEPractice) =>
  <option key={SEPractice.practice} value={SEPractice.practice}>{SEPractice.practice}</option>
);
const Dropdown = () => {
  // 可选：添加state存储选中的值，方便后续逻辑使用
  const [selectedPractice, setSelectedPractice] = useState('')

  const handleSelect=(e)=>{
    console.log("Inside");
    // 可以通过e.target.value拿到选中的选项值
    console.log("选中的内容是：", e.target.value)
    setSelectedPractice(e.target.value)
  }

  return (
    <div>
       {/* 把onSelect改成onChange即可触发 */}
       <select onChange={handleSelect} value={selectedPractice}>  
          <option default hidden value="">
            Select an SE Practice
          </option>
          {optionItems}
       </select>
    </div>
  )
}
export default Dropdown;

额外补充说明 #

• 示例中给每个<option>添加了value属性，方便直接读取选中值，也符合React受控组件的规范
• 原生HTML里的<select>本身就没有select事件，只有change事件，React的事件命名和原生行为保持一致，所以不存在onSelect的用法
• 原代码里的Default属性需要改为小写的default，符合React原生属性的命名规范

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