Question

我有以下反应引导标签：

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

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

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

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

是否有任何方法可以禁用引导标签组件上的键盘输入，以便在按下左/右箭头时不会更改标签？

Answer 1

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

key（即eventKey）
的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

Answer 2

我刚遇到相同的问题，并在此处被重定向。 onSelect元素中的<Tabs>方法接收两个参数-要更改为的选项卡的键和触发更改的事件。当事件是由键事件引起的时，event.type == "keydown"。当事件是由点击事件引起的时，event.type == "click"。以下对我有用：

(<Tabs onSelect={(key, ev) => (ev.type == "click") ? dispatch(...) : null}>
  ...
</Tabs>)

不幸的是，上面的现有答案仅是由于使用了模糊命令才起作用-它实际上并未过滤事件，这让我感觉不太干净。

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

2 个答案: