React - 如何制作一个按钮(在处理HTTP请求时防止双击)

Question

**尝试以下操作 当承诺启动时，按钮将首先被禁用。它将保持禁用，直到承诺解决，然后它将再次启用。请给我建议，因为我被卡在这里，不知道是否是正确的事情**。

let [enabled] = useState(false);
const getTotal = event => {
        enabled = false;
        calTotal().then(validateResult => {
           // enabled = true;
        });
    }
    <Button 
    onClick={() => new Promise((resolve) => {
              resolve({
                      getTotal();
                     })
                 })}>Get Total</Button>

Answer 1

有几件事需要考虑。

1. 你没有设置状态的 enabled 你需要使用来自于 useState 钩子
2. 你不需要把onClick包在一个承诺中。
3. 您没有将按钮的禁用属性绑定到启用变量上。
4. 您的初始状态需要是启用 true 为了能够点击按钮

请看这里的调整。

let [enabled, setEnabled] = useState(true);
const getTotal = event => {
    setEnabled(false)
    calTotal().then(validateResult => {
       setEnabled(true)
    });
}
<Button disabled={!enabled} onClick={() => getTotal()}>Get Total</Button>