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

快速解决方案：Tabs OnSelect方法提供了两个参数。

1. 问（EA事件）
2. 的EventObject

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

例如 ：

    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