Question

我使用React和React-bootstrap，我有一系列可移动的盒子，可以通过鼠标移动，但我也希望能够用键盘调整它们。我的架构是这样的（本例简化）：

<parentImg>
  [<childMovableBox ref='box1'>,
   <childMovableBox ref='box2'>,
   <childMovableBox ref='box3'>,
   <childMovableBox ref='box4'>]
</parentImg>

每次用户点击父img时，都会创建另一个框。我希望只有最后一个＆＃34;与＆＃34; （通过鼠标创建或移动）childMovableBox以对箭头键做出反应。

Q1：如何让键盘的目标按下最后一个＆＃34;与＆＃34;互动？ childMovableBox？

我是否为每个childMoveableBox添加了一个键盘事件处理程序，并在每个组件的ComponentDidUpdate时为每个组件提供焦点叫做？
我应该关注什么？它的顶级div（渲染中）？或者是其他东西？
我需要＆＃39; tabIndex = 0＆＃39;在每个childMoveableBox上？
我希望childMoveableBox在其子项具有焦点时也能按下键盘。我如何实现这一目标？

Q2：我的所有childMoveableBox都是与differenet ref（和键）相同的组件，那么如何确保只有正确的childMoveableBox（而不是它的兄弟姐妹）对键盘按下做出反应？

我相信他们都会得到键盘事件，因为事件捕获的方式是通过向下移动dom树（从parentImg到parentImg的所有子项）然后从目标备份（聚焦的childMoveableDiv）通过parentImg？）。

这里有很多问题，也许我应该把它们分成不同的帖子？

谢谢！

Answer 1

哇，哇。我想我解决了我的问题。我正在使用document.addEventListener("keydown", this.handleKey, false);方法添加事件处理程序，而不是在onKeyPress={this.somefunction}方法中内置的反应。反应方式做我想要的，所以它猜测反应有一个稍微不同的事件捕获顺序（最后与孩子进行交互的事件首先被给予事件？）然后允许我使用event.stopPropagation来阻止它去其他兄弟姐妹？

React js：阻止兄弟组件对键盘事件做出反应的最佳方法

1 个答案: