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 等)并将其传递回父组件？

最佳答案

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

因此您将在 ev.target.value 中获得该值。

然后，在您的父级中，您可以执行以下操作:companiesData.filter(company => company.id === ev.target.value)。你那里有信息。当然还有设置 selectedValue (使用钩子(Hook)或普通的 setState)

关于javascript - React 将值从下拉列表传递回父组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61605308/