使用useState挂钩时，在React中提交表单时禁用提交按钮无法按预期工作答案

【问题标题】：Disabling submit button when submitting form in React not working as expected when using useState hook使用useState挂钩时，在React中提交表单时禁用提交按钮无法按预期工作
【发布时间】：2021-04-16 11:07:29
【问题描述】：

    const [buttonDisabled, setButtonDisabled] = useState(false);

    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        setButtonDisabled(true);

        const response = await fetch(
            "http://localhost:5000/....",
            {
                method: "POST",
                body: JSON.stringify(state),
            },
        );
        setButtonDisabled(false);

        const responseJson = await response.text();

    };

// Button 
<button disabled={buttonDisabled} type="submit">Submit form</button>

我希望按钮在获取过程中被禁用（有一个指示器），但它不起作用。我究竟做错了什么？这也是处理禁用按钮的适当方法吗？或者有没有更好的方法。

【问题讨论】：

我看不出你的代码有什么问题，是的，这就是我要遵循的逻辑来实现你正在寻找的东西。如果提取发生得非常快，您可能看不到禁用状态 - 如果它需要几分之一秒，那么您将无法看到它。如果您想仔细检查您的逻辑是否有效，请在代码中添加一些 console.log：在 setButtonDisabled(true); => console.log('Disabling button') 之后 - 在 setButtonDisabled(false); => console.log('Enabling back the button') 之后，您可以在实际按钮之前放置另一个 @ 987654326@
非常感谢！！这个{console.log(buttonDisabled)} 特别是一个很棒的提示，我还不知道，但肯定会在未来使用！！

标签： javascript reactjs typescript forms form-submit

【解决方案1】：

这是工作代码。看起来你的 API 超快，你看不出有什么不同。 https://codesandbox.io/s/competent-hellman-tf346?file=/src/App.tsx:0-817

import * as React from "react";
import "./styles.css";

export default function App() {
  const [buttonDisabled, setButtonDisabled] = React.useState(false);

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    console.log("here");
    event.preventDefault();
    setButtonDisabled(true);

    const response = await fetch("http://localhost:5000/....", {
      method: "POST",
      body: JSON.stringify({})
    });
    const responseJson = await response.text();
    setButtonDisabled(false);
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <button disabled={buttonDisabled} type="submit">
          Submit form
        </button>
      </form>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

【讨论】：

`非常感谢山姆！您如何看待我为禁用按钮而采取的方法？
您的路径正确。将此 Ans 标记为已接受，它可以帮助其他人。