在同一个函数 React 中处理 onClick 和 onKeyPressDown

Question

在 React 中，我有一个 div，当用鼠标单击，或按 tab 键并按下回车键或 space 时，它会激活（它同时使用 onClick 和 onKeyPressDown 来触发相同的功能） .但是，我不确定如何只考虑鼠标单击事件或 enter/space 事件。例如，如果有人只是按了一个随机键，我不希望函数的 setState 调用运行。

toggleFunction = () => {
     if (event.key === " " || event.key === "Enter") {
        this.setState({ this.state.pressed: !this.state.pressed })
     } 
}

<div onClick={this.toggleFunction} onKeyPressDown={this.toggleFunction}

在 toggleFunction 中，我如何确保如果鼠标点击发生状态会改变，但如果一个按钮没有进入或按下 space 它不会改变？

Answer 1

您可以使用 event.type 来区分不同的事件，例如 mouse/keyboard 点击

toggleFunction = (event) => {
     if (event.type === 'mousedown' || (event.type === 'keydown' && (event.key === " " || event.key === "Enter"))) {
        this.setState({ this.state.pressed: !this.state.pressed })
     } 
}

在同一个函数 React 中处理 onClick 和 onKeyPressDown

Handling onClick and onKeyPressDown in the same function React

keypress

mouseclick-event

reactjs