javascript - 将传递的值从下拉列表 react 回父组件

我的父组件看起来像：

<div>
    <Dropdown items={companiesData} handler={handleClick} />
    ....//More stuff
   </div>

companiesData是ID，companyName等项目的数组。

我通过以下方式创建下拉菜单：

const Dropwdown = ({ items, handler }) => {
  return (
    <select onChange={handler}>
      {items.map(({ id, value, companyName, companyType }) => (
        <option
          key={id}
          value={value}
        >
          {`${companyName}, ${companyType} `}
        </option>
      ))}
    </select>
  )

}

我知道可以从handleClick函数访问e.target.value并获取下拉列表的值，但是如果我想获取所选值的整个对象（例如，包含id，value，companyName等）并传递该怎么办？它返回到父组件？

最佳答案

在下拉列表中，添加value属性以选择并使用id，例如value = {this.state.selectedValue}。

因此，您将在ev.target.value中拥有该值。

然后，在您的父母中，您可以执行以下操作：companiesData.filter(company => company.id === ev.target.value)。而且您那里有信息。
并当然设置selectedValue（使用钩子或常规setState）