在 ReactJS 中，onClick 事件在 Google Chrome 瀏覽器中不起作用，但在 Firefox 中運行良好。當我在select內的選項標簽中添加帶有箭頭功能的 onClick 事件時，它在 Google Chrome 中的任何情況下都不起作用。
<select>
{data.map( (item) => {
return(
<>
<option onClick={()=>alert('Test')} value={item.name} key={item.id}>{item.name}</option>
</>
)
})}
</select>
我實際上需要在選項標簽中使用一些引數呼叫 ES6 箭頭函式
<select>
{data.map( (item) => {
return(
<>
<option onClick={()=>LoadNew(item.id)} value={item.name} key={item.id}>{item.name}</option>
</>
)
})}
</select>
這在 Firefox 中運行良好，但在 Google Chrome 瀏覽器中不起作用。知道如何解決這個問題嗎？
uj5u.com熱心網友回復：
您需要將onChange道具傳遞給select標簽，然后您可以從那里訪問該值。
更新：
如果您想訪問整個資料，您需要使用 JSON。
<select
onChange={(e) => {
console.log(JSON.parse(e.target.value));
}}
>
{data.map((item) => {
return (
<>
<option value={JSON.stringify(item)} key={item.id}>
{item.name}
</option>
</>
);
})}
</select>
uj5u.com熱心網友回復：
所以我想出了一個蠻力的方法。因為您需要將專案的 id 傳遞給 LoadNew 函式
export default function App() {
let data = [
{ name: "Love", id: 1 },
{ name: "labs", id: 2 }
];
return (
<div className="App">
<select
onChange={(e) => {
let item= data.filter((val) => val.name == e.target.value);
LoadNew(item.id)
}}
>
{data.map((item) => {
return (
<>
<option value={item.name} key={item.id}>
{item.name}
</option>
</>
);
})}
</select>
</div>
);
}
您可以通過在 select 標記上放置 onChange 事件偵聽器來獲取所選值。然后，在將專案的 id 傳遞給函式后，我們過濾資料以獲取特定專案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/401946.html
標籤：javascript 反应 谷歌浏览器 ecmascript-6