如何在 react-bootstrap 下拉列表中停止 toggle/show 项目？

Question

代码：-

<td style={{ color: "white", width: "250px" }}>
                                        <DropdownButton id="SelectFocus" title={playdata.ChannelName} tabIndex={-1}
                                            onToggle={ontoggle}
                                            menuVariant='dark'                                           
                                        >
                                            {Channelname.map((val, id) => {
                                                {
                                                    return (
                                                        <Fragment key={id}>
                                                            {removeRedundant([...val, playdata.ChannelName]).map((val1) => {
                                                                return (
                                                                    <Dropdown.Item
                                                                        onClick={(e) => { setPlayer(val1, playdata.idx, StoreIdx) }}
                                                                        key={val1}>{val1}</Dropdown.Item>
                                                                )
                                                            })}
                                                        </Fragment>
                                                    )
                                                }
                                            })
                                            }

                                        </DropdownButton>
                                    </td>

我正在使用 React bootstrap 下拉菜单，当我按下按键按钮时它会自动打开 items/options 我该如何停止？ 我不希望在按下向下键时出现项目，所以如何在 React js 中停止它？

请帮忙...

Answer 1

当您使用 DropdownButton 组件时，按钮周围有一个额外的 div。使用更多底层 Dropdown 组件直接在按钮上设置 tabIndex：

<Dropdown>
    <Dropdown.Toggle tabIndex={-1}>Test</Dropdown.Toggle>
    <Dropdown.Menu>
      <Dropdown.Item>Test 1</Dropdown.Item>
      <Dropdown.Item>Test 2</Dropdown.Item>
      <Dropdown.Item>Test 3</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>

但请记住，一旦您通过点击聚焦下拉菜单，按下箭头时您将获得相同的行为。

为了防止下拉菜单切换，我相信您可以使用 onKeyDown 事件，但到目前为止我无法让它工作：

const handleKeyDown = (event) => {
if (event.key === "ArrowDown") {
  event.preventDefault();
}
};