大家好!我使用 React 和 Material ui 库。我想分别处理点击事件和长按事件。我认为问题与异步设置状态有关,但现在我不知道如何处理此事件
const [isCommandHandled, setIsCommandHandled] = React.useState(null);
const handleButtonPress = function (e) {
setIsCommandHandled(false);
console.log('ON_MOUSE_DOWN ' + isCommandHandled); // here value null
buttonPressTimer = setTimeout(handleLongPress, 1500, e);
}.bind(this);
const handleLongPress = (e) => {
if (!isCommandHandled) {
setIsCommandHandled(true);
console.log('TIMER_IS_EXECUTED' + isCommandHandled); //Here value false or null
// some other logic for long press event
}
clearTimeout(buttonPressTimer);
};
const handleButtonRelease = function (e) {
if (!isCommandHandled) {//isCommandHandled isn't updated here, as a result logic is executed always
// got regular click, not long press
// specific logic
setIsCommandHandled(true);
}
clearTimeout(buttonPressTimer);
};
<IconButton
onMouseDown={(e) => handleButtonPress(e)}
onMouseUp={(e) => handleButtonRelease(e)}
>
```
最佳答案
您可以使用带有回调的setState并将设置的超时ID放入state:
setIsCommandHandled((prevState)=>{
console.log("TIMER_IS_EXECUTED" + isCommandHandled); //Here value false or null
return true; });
关于javascript - 如何在React Web中处理长按事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59136239/