码迷,mamicode.com
首页 > 其他好文 > 详细

有多个按钮时点击单个按钮显示加载中

时间:2020-12-16 11:37:45      阅读:3      评论:0      收藏:0      [点我收藏+]

标签:sign   react   http   des   加载   rgba   style   click   sig   

const {  Button  } = antd;
const {  PoweroffOutlined  } = icons;

class App extends React.Component {
  state = {
    loadings: [],
  };

  enterLoading = index => {
    this.setState(({ loadings }) => {
      const newLoadings = [...loadings];
      newLoadings[index] = true;

      return {
        loadings: newLoadings,
      };
    });
    setTimeout(() => {
      this.setState(({ loadings }) => {
        const newLoadings = [...loadings];
        newLoadings[index] = false;

        return {
          loadings: newLoadings,
        };
      });
    }, 6000);
  };

  render() {
    const { loadings } = this.state;
    return (
      <>
        <Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
          Click me!
        </Button>
        <Button
          type="primary"
          icon={<PoweroffOutlined />}
          loading={loadings[1]}
          onClick={() => this.enterLoading(1)}
        >
          Click me!
        </Button>
        <Button
          type="primary"
          icon={<PoweroffOutlined />}
          loading={loadings[2]}
          onClick={() => this.enterLoading(2)}
        />
      </>
    );
  }
}

ReactDOM.render(<App />, mountNode);

https://ant.design/components/button-cn/

有多个按钮时点击单个按钮显示加载中

标签:sign   react   http   des   加载   rgba   style   click   sig   

原文地址:https://www.cnblogs.com/lbx6935/p/14115095.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!