https://codesandbox.io/s/busy-lamport-lfqwt?file=/src/App.js:0-678
使用状态挂钩
const [loading, _setLoading] = useState(false)
需要根据上述状态禁用按钮
return (
<div className="App">
<button type="button"
onClick={handleSubmit}
disabled={loading}> Send </button>
</div>
);
事件处理程序是
async function handleSubmit(event) {
setLoading(true)
console.log(loadingRef.current)
await setTimeout( () => {} , 3000)
setLoading(false)
console.log(loadingRef.current)
}
setTimeout等待三秒钟时需要禁用按钮
React在以后运行事件处理程序时将默认的加载状态存储在一个闭包中。因此,我使用useRef来访问处理程序中的当前值(与需要实现的内容无关。)如何根据加载状态禁用按钮三秒钟。
答案 0 :(得分:1)
您在这里遇到几个问题:
setTimeout
不会返回Promise,因此await
不会延迟第二个setLoading
调用的执行。onclick
(全部为小写)而不是onClick
传递给<Button>
。解决这些问题(并清除与您无关的参考资料),然后进入此工作示例(demo):
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [loading, setLoading] = useState(false);
async function handleSubmit(event) {
setLoading(true);
console.log(loading);
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 3000)
);
setLoading(false);
console.log(loading);
}
return (
<div className="App">
<button type="button" onClick={handleSubmit} disabled={loading}>
Send
</button>
</div>
);
}