Reactjs 侦听嵌套在react popper中的组件中的keyUp和down事件

我有一个使用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>

{
如果（例如keyCode===38）{
}
}}
onKeyDown={（e）=>{
如果（例如keyCode===40）{
console.log（'cls list'，e）；
}
}}>
}

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

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

{nodes.length
？nodes.map（node=>
)
: 
{
无效的
}
}

这里的问题是，我希望上面的包装Div能够监听keypup和down事件，但即使使用了

tabIndex='0'

，它也不起作用，只有当我像上面一样将它放在popper管理器上时，它才起作用，我想在代码中实现类似这样的搜索（Target、SearchInput、SearchResults组件）查看是否已经捕获了

onKeyUp

和

onKeyDown

事件和

stopPropagation

。如果有，请删除

stopPropagation