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

Question

我是一个从事React原型的Java开发人员，并试图从选定的下拉列表中检索ID属性，然后我们应该将其发布到我们的API中。下拉选项上显示的用户显示的值是演员的名称，而API需要其ID。 我想我可能会在某个地方遇到这个错误的语法，但我看不到哪里。我尝试在 handleselect 调用中添加额外的参数，创建了另一个新的HandleClick函数，并将其添加到下拉菜单中。项目不是下拉button ，更改了参数和呼叫，但是我只对这些字段不确定，现在已经用完了想法。 任何帮助都非常感谢。

<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

下拉down.item只有一个onclick属性，但没有一个选择性属性：。当您只需要演员的ID来提交时，我只会在该州安全的ID安全，而别无其他。

我创建了一个带有一些虚拟数据的沙箱： https://codesandbox.io/s/vibrant-s/s/vibrant-s/s/vibrant-s/vibrant-s/c- Blackwell-H7S7OP

• 为演员ID创建一个状态
• 设置此状态下dropdownbutton设置
• 适当的EventKey将eventkey设置为下拉列表。iTEM迭代时，因此您可以将它们从OnSelect Callback

编辑中删除：下拉dropdown是带有覆盖菜单的按钮。您通常不会在按钮中显示所选的Valu。对于这种情况，我建议您使用Form.SELECT组件。我已经对沙箱进行了调整。

EDIT2：我还添加了一个hacky下拉按钮，该按钮根据所选值更改标题。但是我不建议您这样做。