如何使用事件处理程序中的React useState挂钩禁用按钮

时间:2020-09-09 23:44:27

标签: reactjs react-hooks

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来访问处理程序中的当前值(与需要实现的内容无关。)如何根据加载状态禁用按钮三秒钟。

1 个答案:

答案 0 :(得分:1)

您在这里遇到几个问题:

  1. setTimeout不会返回Promise,因此await不会延迟第二个setLoading调用的执行。
  2. 您正在将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>
  );
}