如何在 MUI 中制作加载按钮？答案

【问题标题】：How to make a loading button in MUI?如何在 MUI 中制作加载按钮？
【发布时间】：2018-07-15 02:51:43
【问题描述】：

我正在使用 react 和 MUI 框架，我想知道如何使用这个框架创建加载按钮？

我正在寻找类似于this 的东西。

【问题讨论】：

你的意思是按钮中的加载动画吗？
@JulesDupont 是的，我愿意！
你使用的是material-ui v1还是v0？
@JulesDupont 我正在使用最新的 v1 版本和最新版本的 react。

【解决方案1】：

据我所知，material-ui 中没有任何一个组件可以开箱即用地完成此任务。但是，您可以使用 CircularProgress 轻松实现自己的。

假设您使用的是 material-ui v1，这里有一个粗略的例子。首先，我创建一个接受loading 属性的LoadingButton - 如果该属性是true，我将显示一个CircularProgress 指示符。它还接受 done 属性 - 如果这是真的，按钮会清除进度指示器并成为显示成功的复选标记。

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';
import { CircularProgress } from 'material-ui/Progress';
import Check from 'material-ui-icons/Check';

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
});

const LoadingButton = (props) => {
  const { classes, loading, done, ...other } = props;

  if (done) {
    return (
      <Button className={classes.button} {...other} disabled>
        <Check />
      </Button>
    );
  }
  else if (loading) {
    return (
      <Button className={classes.button} {...other}>
        <CircularProgress />
      </Button>
    );
  } else {
    return (
      <Button className={classes.button} {...other} />
    );
  }
}

LoadingButton.defaultProps = {
  loading: false,
  done: false,
  };

LoadingButton.propTypes = {
  classes: PropTypes.object.isRequired,
  loading: PropTypes.bool,
  done: PropTypes.bool,
};

export default withStyles(styles)(LoadingButton);

您可以使用LoadingButton 如下例所示，它使用state 在按钮上设置适当的道具。

import React from 'react';
import LoadingButton from './LoadingButton';

class ControlledButton extends React.Component {
  constructor(props) {
    super(props);

    this.state = { loading: false, finished: false };
  }

  render() {
    const { loading, finished } = this.state;

    const setLoading = !finished && loading;

    return (
      <div>
        <LoadingButton
          loading={setLoading}
          done={finished}
          onClick={() => {
            // Clicked, so show the progress dialog
            this.setState({ loading: true });

            // In a 1.5 seconds, end the progress to show that it's done
            setTimeout(() => { this.setState({ finished: true })}, 1500);
          }}
        >
          Click Me
        </LoadingButton>
      </div>
    );
  }
}

export default ControlledButton;

您当然可以调整样式和功能以满足您的确切需求。

【讨论】：

成功了！您将如何使用...加载样式而不是循环进度来做到这一点:)
您可以看到material-ui here中内置的所有进度指示器。你应该可以把它们换进换出。
在 material-ui 中没有像点点加载指示器这样的东西。我们要怎么解决？ :-)
如果您对 dotdotdot 死心塌地，您可能需要自己制作，因为我找不到任何提供开箱即用的 React 库。但是，material-ui 是根据 Material Design 制作的——为什么不坚持使用 Material Design 进度指标之一呢？
这可行，但是，它不会产生有效的 HTML。 CircularProgress 使用了一个 div，它在一个按钮内使 HTML 无效。

【解决方案2】：

在较新版本的 MUI 中，您可以使用LoadingButton 组件，它目前在实验室包中。这只是带有 loading 属性的 Button 的包装。您可以自定义loadingIndicator 组件及其位置。请看下面的例子：

import LoadingButton from '@mui/lab/LoadingButton';

<LoadingButton loading={loading}>
  Text
</LoadingButton>

<LoadingButton
  endIcon={<SendIcon />}
  loading={loading}
  loadingPosition="end"
  variant="contained"
>
  Send
</LoadingButton>

【讨论】：

我们如何安装lab 包？
@ABAbhi 查看安装指南here