reactjs - 如何在 Material UI 中制作加载按钮？

Question

我正在使用react与 in Material UI框架，我想知道:如何使用这个框架创建加载按钮？

我正在寻找类似this的东西.

Answer 1

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

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

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;

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