点击按钮禁用倒计时

类组件方式

state = {
// 查询按钮禁用倒计时
searchButtonCountDown: 0,
};
startSearchButtonCountDown = () => {
this.setState({ searchButtonCountDown: 10 });
const timer = setInterval(() => {
const { searchButtonCountDown } = this.state;
if (searchButtonCountDown) {
this.setState({ searchButtonCountDown: searchButtonCountDown - 1 });
} else {
clearInterval(timer);
}
}, 1000);
};
<Button loading={loading} type=“primary” disabled={searchButtonCountDown} onClick={() => this.onSearch(field.getValues())}>查询{searchButtonCountDown || searchButtonCount ? (${searchButtonCountDown秒内禁用) : ‘’}

函数组件方式

let [second, setSecond] = useState(0);
const secondRef = useRef(second);
secondRef.current = second;

const customSubmit = () => {
setButtonDisable(true);
setSecond(secondRef.current += 10)
const timer = setInterval(() => {
if (secondRef.current > -1) {
let nextSecond = secondRef.current–
setSecond(nextSecond)
} else {
setButtonDisable(false);
clearInterval(timer)
}
}, 500)
submit();
};
const getButton = () => {
if (buttonDisable) {
return 搜索${second}秒内禁用
} else {
return ‘搜索’
}
}
locale={{ search: getButton(), searchProps: { disabled: buttonDisable } }}