在标题文本输入中按空格键时防止 Bootstrap 5 手风琴展开

Question

我在使用react-bootstrap的React应用程序中有一个手风琴组件。在

AccordianHeader

组件中，我有一个文本输入。每当我释放文本输入的空格键时，手风琴就会展开或折叠。我遇到了类似的问题，单击输入也会扩展或收缩手风琴，但可以通过在输入中添加

onClick={(e) => e.stopPropagation()}

来解决此问题。

展开/折叠似乎发生在

keyUp

事件上（如果我按住空格键以使其产生多个空格，则该动作仅在我松开空格键时发生）。但是，添加

onKeyUp={(e) => e.stopPropagation()}

并不能解决问题。我还尝试在输入

preventDefault()

事件上添加

keyUp

但没有成功。释放空格键时是否会触发一些其他事件，我需要用

stopPropagation()

或

preventDefault()

处理？

Answer 1

回答我自己的问题 - 在输入的

preventDefault()

事件上添加

onKeyUp

实际上可以防止按下空格键时手风琴的展开/折叠。我在实现它时发现语法不正确，当我回去检查时发现这个解决方案有效。只是在这里发帖给将来可能遇到同样问题的人。