监听嵌套在 react-popper 中的组件内的 keyUp 和 down 事件答案

【问题标题】：Listen to keyUp and down events inside component nested in react-popper监听嵌套在 react-popper 中的组件内的 keyUp 和 down 事件
【发布时间】：2018-02-13 08:43:04
【问题描述】：

我有一个像这样使用 react-popper 库的父组件

<Manager
  className=''
  data-component-name={componentName}
  data-store-name={...}
  onKeyUp={(e) => {
    if(e.keyCode === 38) {

    }
  }}
  onKeyDown={(e) => {
    if(e.keyCode === 40) {
      console.log('cls list', e);
    }
  }}>
  <Target
    className={''}>
    <SearchInput
      componentName={...}
      storeName={...}
      placeholderLabel={...}
      refCallback={...}
      disabled={...}/>
  </Target>
  <Popper placement='bottom'
          modifiers={popperModifiers}
          className={'myClass'}>
    <SearchResults componentName={...}
                   storeName={...}/>}
  </Popper>
</Manager>

所以在 Popper JSX 组件中，我有子组件 SearchResults 它是另一个组件的父组件，如下所示

<div>
  {nodes.length
    ? nodes.map(node =>
      <TreeNode key={...} node={node} {...dataProps} />)
    : <div className=''>
      {
        null
      }
    </div>
  }
</div>

这里的问题是我希望上面的包装 Div 来监听 keyUp 和 down 事件，但是即使在使用 tabIndex='0' 之后它也没有，它只有在我把它放在 popper 管理器上时才有效，比如在上面，我想实现这样的目标fiddle

【问题讨论】：

标签： reactjs keyevent popper.js

【解决方案1】：

在您的代码（Target、SearchInput、SearchResults 组件）中搜索，看看您是否已经捕获了onKeyUp 和onKeyDown 事件以及stopPropagation。删除stopPropagation（如果有）。

【讨论】：