选项字段内的 onClick DOM 事件在 Chrome 浏览器中不起作用

Question

这是问题的细分，

在使用 onClick 事件单击当前选项中的项目后，我正在调用 setItem 函数来设置选项字段元素中项目的状态，就像这样

        <select>
        {items.map((singleItem) => (
          <option key={singleItem.id} onClick={() => setItem(singleItem.name)}>
            {singleItem.name}
          </option>
        ))}
      </select>
      
      <h4>{itemSelected}</h4>

这是我们拥有项目状态和 setItem 函数的地方，使用 useEffect 将第一个项目名称设置为默认 itemSelected

        const [itemSelected, setItem] = useState("")
        useEffect(() => {
            setItem(items[0].name)
        }, [])

此有效代码在 Firefox 上按我预期的方式工作，但选项字段中的 onClick 事件在 Chrome 中不起作用。我怎样才能让它在上面提到的两个浏览器上运行？

这是一个带有运行代码的沙盒

https://codesandbox.io/s/stoic-hermann-bw83hj

Answer 1

onClick 在 <option> 元素上是 non-standard，请像这样在 <select> 上使用 onChange：

 <select onChange={(event) => setItem(event.currentTarget.value)}>
        {items.map((singleItem) => (
          <option key={singleItem.id}>
            {singleItem.name}
          </option>
        ))}
      </select>

选项字段内的 onClick DOM 事件在 Chrome 浏览器中不起作用

onClick DOM event inside an option field doesn't work in the Chrome browser

firefox

google-chrome

onclick

reactjs