以下是問題的分解，
在使用 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
uj5u.com熱心網友回復：
onClickon <option>element 是非標準的，請onChange這樣使用<select>：
<select onChange={(event) => setItem(event.currentTarget.value)}>
{items.map((singleItem) => (
<option key={singleItem.id}>
{singleItem.name}
</option>
))}
</select>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/459647.html