重复问题

• 我搜索了现有的问题

最新版本

• 我测试了最新版本

总结 💡

如果onClick处理程序返回一个promise,那么LoadingButton可以设置其自身的内部状态以显示加载指示器，尽管loading prop值为真。此外，这种行为可以通过默认启用/禁用，并使用像enableOnClickPromiseCheck这样的prop覆盖它

示例 🌈

我不期望这个工作正常，只是根据组件源代码快速起草了一些东西，这个例子没有考虑到启用/禁用这种行为的能力，因为它可能会破坏现有用户的实现。

const LoadingButton = props => {
  const [_loading, setLoading] = useState(false);
  const { onClick, loading = false, disabled = false, ...other } = props;

  const ownerState = {
    ...props,
    loadingIndicator,
    loadingPosition,
    variant,
    loading: _loading || loading,
    disabled: disabled || _loading || loading,
  };

  const loadingButtonLoadingIndicator = ownerState.loading ? (
    <LoadingButtonLoadingIndicator className={classes.loadingIndicator} ownerState={ownerState}>
      {loadingIndicator}
    </LoadingButtonLoadingIndicator>
  ) : null;

  const handleClick = async (...args)=> {
    setLoading(true);
    await onClick?.(...args);
    setLoading(false);
  };

  return <LoadingButtonRoot onClick={handleClick} disabled={ownerState.disabled} {...other} />;
};

动机 🔦

在我的项目中，我曾经每次都创建自己的AsyncButton,有自己的进度指示器和其他所有东西。当LoadingButton被添加到lab包时，我认为我可以摆脱它，但它只是让它变得更简单，我不需要维护加载指示器的样式和其他所有东西，但我仍然需要 Package 我的处理程序以实现类似promise的行为

CodeSandbox 🧊

https://codesandbox.io/s/mui-async-loading-button-demo-g1fm6e