React在弱网环境下限制按钮多次点击,防止重复提交

React在弱网环境下限制按钮多次点击,防止重复提交

this.state = {
isRepeatClick: true //设置开关来控制重复点击
}
//点击确定按钮,防止重复提交
okHandle = () => {
const { isRepeatClick} = this.state
if (isRepeatClick) {   //如果为true 开始执行
this.setState({ isRepeatClick: false })   //将isRepeatClick变成false，将不会执行处理事件

// 在此处编写点击事件执行的代码

const that = this   // 为定时器中的setState绑定this
setTimeout(function () {       // 设置点击延迟事件，1秒后将执行
that.setState({ isRepeatClick: true })   // 将isRepeatClick设置为true
}, 1000);
}
};

上述代码中的setState是异步的，setTimeout也是异步的。当调用多次okHandle 的时候，下一次的okHandle会在上次调用okHandle 的异步函数执行完成后 再执行的

setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。