如何制作加载按钮？答案

【问题标题】：How to make a loading button?如何制作加载按钮？
【发布时间】：2022-12-20 08:31:13
【问题描述】：

我想制作一个按钮来加载动画，直到一个功能完成。是这样的：

const [isLoading, setLoading] = useState<boolean>(false)

function handleSave() {
      setLoading(true)

      for (let i = 1; i < 20000; i++) {};

      setLoading(false)

    }

 <Button
      loading={isLoading}
      disabled={isLoading}
      onClick={_ => handleSave()}>
      Save
</Button>

我是初学者，我不知道该怎么做。你有什么建议吗？

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

我认为您使用的是react-bootstrap。如果我没记错的话，按钮没有加载属性。 Here 是关于如何做一个加载按钮的文档

这是在加载时用不同的文本渲染按钮时可以做的。

<Button
    disabled={isLoading}
    onClick={handleSave}
>
{ isLoading ? "Loading": "Save" }
</Button>

您也可以包括 react-bootstrap 中的 spinner animation。

<Button
    disabled={isLoading}
    onClick={handleSave}
>
{ isLoading && <Spinner as="span" animation="grow" /> }
{ isLoading ? "Loading": "Save" }
</Button>

【讨论】：

【解决方案2】：

UseEffect hook 使按钮显示加载动画直到功能完成：

const [isLoading, setLoading] = useState<boolean>(false);

function handleSave() {
  for (let i = 1; i < 20000; i++) {};
}

useEffect(() => {
  setLoading(true);
  handleSave();
  setLoading(false);
}, []);

return (
  <Button
    loading={isLoading}
    disabled={isLoading}
    onClick={() => handleSave()}
  >
    Save
  </Button>
);

参考：https://reactjs.org/docs/hooks-effect.html

【讨论】：

不起作用。你确定吗？