如何在react bootstrap Dropdown中停止切换/显示项目

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进行下拉，当我按下按键时，它会自动打开项目/选项，我该如何停止？我不想在按下向下键时出现项目，所以我如何在react js中停止它？

请帮忙。。。

Answer 1

当您使用DropdownButton组件时，按钮周围会有一个额外的div。使用更多的低级别下拉组件直接在按钮上设置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();
}
};