将整个数据传递给选择标记中的 onChange

Question

在 ReactJS 中，onClick 事件在 Google Chrome 浏览器中不起作用，但在 Firefox 中可以正常工作。当我在 select 内的 option 标记中添加带有箭头功能的 onClick 事件时，它在 Google Chrome 中的任何情况下都不起作用。

<select>
   {data.map( (item) => {                            
     return(
       <>
         <option onClick={()=>alert('Test')} value={item.name} key={item.id}>{item.name}</option>
       </>
      )
   })}
</select>

我实际上需要在 option 标签内调用带有一些参数的 ES6 箭头函数

<select>
{data.map( (item) => {
  return(
     <>
      <option onClick={()=>LoadNew(item.id)} value={item.name} key={item.id}>{item.name}</option>
     </>
    )
  })}
</select>

这在 Firefox 中运行良好，但在 Google Chrome 浏览器中不起作用。知道如何解决这个问题吗？

Answer 1

您需要将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>

Answer 2

所以我想出了一个蛮力方法。因为您需要将项目的 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>
      );
   }

您可以通过在选择标签上放置一个 onChange 事件监听器来获取选定的值。在我们将商品的 id 传递给函数之后，我们过滤数据以获取特定商品。