Reactjs : How I can change button style when clicked

Question

I am new to ReactJS, Currently I am using ant.design for my interface and In ant.design I am using Switch Steps for Wizard form. I want to change Next Button style when clicked . I am new to this platform please guide me

Thanks

Answer 1

So to change the loading state you can modify the example in the docs to be:

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 will cause the button to go into loading state when Next is clicked. However you need some external event that is fed into the component to tell it when to remove the loading state.

This can be done by having a this.prop that is changed from the parent component and detected in componentWillReceiveProps, where you do this.setState({loading:false}), or by making next() call some asynch method which resets the loading state in its callback.