Question

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

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

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

在toggleFunction中，如何确保如果发生鼠标单击，状态将发生变化，但是如果未输入按钮或按下空格则它不会发生变化？

Answer 1

您可以使用event.type区分不同事件，例如鼠标/键盘单击

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

1 个答案: