Reactjs：单击时如何更改按钮样式

Question

我是 ReactJS 的新手，目前我正在使用 ant.design 作为我的界面，在 ant.design 我正在使用 Switch Steps 作为向导表单。我想在单击时更改 Next Button 样式。我是这个平台的新手，请指导我

谢谢

Answer 1

因此，要更改加载状态，您可以将文档中的示例修改为：

import { Steps, Button, message } from 'antd';

const Step = Steps.Step;

const steps = [{
  title: 'First',
  content: 'First-content',
}, {
  title: 'Second',
  content: 'Second-content',
}, {
  title: 'Last',
  content: 'Last-content',
}];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 0,
      loading: false
    };
  }

  next() {
    const current = this.state.current + 1;
    this.setState({ current, loading: true });
  }

  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  }

  render() {
    const { current, loading } = this.state;
    return (
      <div>
        <Steps current={current}>
          {steps.map(item => <Step key={item.title} title={item.title} />)}
        </Steps>
        <div className="steps-content">{steps[current].content}</div>
        <div className="steps-action">
          {
            current < steps.length - 1
            && <Button type="primary" loading={loading} onClick={() => this.next()}>Next</Button>
          }
          {
            current === steps.length - 1
            && <Button type="primary" loading={loading} onClick={() => message.success('Processing complete!')}>Done</Button>
          }
          {
            current > 0
            && (
            <Button loading={loading} style={{ marginLeft: 8 }} onClick={() => this.prev()}>
              Previous
            </Button>
            )
          }
        </div>
      </div>
    );
  }
}

这将导致单击“下一步”时按钮进入加载状态。但是，您需要将一些外部事件馈送到组件中，以告诉它何时删除加载状态。

这可以通过 this.prop 从父组件更改并在 componentWillReceiveProps 中检测到 this.setState({loading:false}) 或通过 next() 来完成调用一些在其回调中重置加载状态的异步方法。

Reactjs：单击时如何更改按钮样式

Reactjs : How I can change button style when clicked

javascript

reactjs

ecmascript-6

antd

ant-design-pro