React Bootstrap 选项卡上禁用键盘事件

Question

我有以下反应引导选项卡：

<Tabs>
    <Tab title="first">
       <ImageGallery/>
    </Tab>

    <Tab title="second">
       <ImageGallery/>
    </Tab>

    <Tab title="third">
        <ImageGallery/>
    </Tab>
<Tabs>

该<ImageGallery/>组件使用键盘命令（例如向左和向右箭头）来更改图像。React Bootstrap 选项卡组件也使用左右箭头来更改选项卡，但是，这会导致冲突。

有没有办法禁用引导选项卡组件上的键盘输入，以便按下左/右箭头时不会更改选项卡？

Answer 1

快速解决方案：TabsOnSelect方法提供两个参数。

1. key（即eventKey）
2. 事件对象

因此，每当用户通过单击选项卡更改选项卡时，OnSelect方法都会接收两个参数。（即 eventKey 和 eventObject [目标]），但如果用户使用左右箭头键盘键更改选项卡，则 OnSelect 方法中仅接收一个参数。即事件键

例如 ：

    onSelect = (key, e) => {  
      if(e){
        this.setState({'key': key});
        e.currentTarget.blur();
      }
    }
    // e is undefind when user uses left and right arrow keyboard keys to change tabs
   // e.currentTarget.blur(); //to focus out tab so that page scrolling will work on arrow keys