react中键盘事件无法在div上触发的问题解决

通常情况下在div上是无法聚焦触发键盘事件

<div
    id="HelloWorld01"
    onKeyUp={event => {
        console.log(event, event.keyCode, "event");
    }}
>
    <Card bodyStyle={{ paddingTop: 14 }}>
        <ContractView {...detail} />
    </Card>
</div>

通过添加 tabindex="-1" 来解决

<div
    id="HelloWorld01"
    tabIndex="-1"
    onKeyUp={event => {
        console.log(event, event.keyCode, "event");
    }}
>
    <Card bodyStyle={{ paddingTop: 14 }}>
        <ContractView {...detail} />
    </Card>
</div>

tabindex 接受一个整数作为值，具有不同的结果，具体取决于整数的值：

• tabindex=负值 (通常是tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用JS做页面小组件内部键盘导航的时候非常有用。

• tabindex=“0” ，表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的DOM结构来决定的。

• tabindex=正值，表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前DOM中的先后顺序决定。

• 根据键盘序列导航的顺序，值为 0 、非法值、或者没有 tabindex 值的元素应该放置在 tabindex 值为正值的元素后面。

MDN参考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/tabindex

React参考：https://zh-hans.reactjs.org/docs/events.html