如何使用 React DropdownButton 从所选项目中获取额外属性

Question

我是一名 Java 开发人员，正在研究 React 原型并一直试图从所选下拉项中检索 ID 属性，然后我们应该 post 到我们的 api。在下拉选项中为用户显示的值是演员的名字，而 api 需要他们的 ID。我想我可能在某个地方弄错了这个语法，但我看不到在哪里。我已经尝试向 handleSelect 调用添加额外的参数，创建了另一个新的 handleClick 函数并将其添加到 Dropdown。 Item 而不是 DropdownButton，更改了参数并四处调用，但我只得到这些字段的未定义并且现在运行没有想法。非常感谢任何帮助。

<DropdownButton 
onSelect={handleSelect} 
title={selected?.key || list[0].key}>
{list.map((item, index) => {
    return (
        <Dropdown.Item key={index} eventKey=. 
            {item.key} onSelect={handleClick}>
            {item.key}
            </Dropdown.Item>
           );
        })}
 </DropdownButton>

const handleSelect = (key, event, value) => {
  setSelected({
    key: key,
    value: event.target.value
  })

  setActorId(getSelectedActorId(value))
}

const handleClick = (eventKey, event) => {
  console.log(eventKey)
  console.log(event)
}

非常感谢。

Answer 1

Dropdown.Item 只有 onClick 属性，但没有 onSelect 属性: https://react-bootstrap.netlify.app/components/dropdowns/#dropdown-item-props。当你只需要演员的 id 来提交时，那么我只会将 id 保存在状态中而不是其他任何东西。

我用一些虚拟数据创建了一个沙箱：https://codesandbox.io/s/vibrant-blackwell-h7s7op

为 actor id 创建一个状态
将此状态设置为 DropdownButton 的 onSelect
在迭代时将适当的 eventKey 设置为 Dropdown.Item，这样你就可以将它们从 onSelect 回调中取出来

编辑：下拉菜单是一个带有叠加菜单的按钮。您通常不会在按钮中显示选定的值。对于这种情况，我建议您使用 Form.Select 组件。我已经相应地调整了沙箱。

Edit2：我还添加了一个 hacky 下拉按钮，它根据所选值更改其标题。但我不建议你这样做。

如何使用 React DropdownButton 从所选项目中获取额外属性

How to get extra properties from selected item using React DropdownButton

reactjs

react-bootstrap

react-hooks