How to disable a button after clicking?

Question

I am saving a value through a textfield and after the button click, I wanted to disable the button so the user can't press it again.

I am using React.js for the implementation of the app.

<button type="button" className="btn btn-info round btn-glow px-2 float-right">Confirm</button>

You need a handler function for click event, and a variable to save current state, see https://stackoverflow.com/a/49642037/4504053 — Adhika Setya Pramudita, Jun 11 '19 at 03:54
You should use a form and look for `onSubmit` event of the form instead of `onClick` of the button. You know people can submit by hitting enter too. — Vaibhav Vishal, Jun 11 '19 at 04:09

Peyman · Answer 1 · 2019-06-11T04:19:24.203

1

create a state like this

state = {
    btnIsDisable: false
}

set in button

<button disabled={this.state.btnIsDisable} type="button" className="btn btn-info round btn-glow px-2 float-right">Confirm</button>

in onClick handler change the state

this.setState({btnIsDisable:true});

edited Jun 11 '19 at 04:19

answered Jun 11 '19 at 03:58

Peyman

101
1
6

score 0 · Answer 2 · answered Jun 11 '19 at 04:00

You have to create a class component and set the initial state button state to true and then change it to false when the click function is fired

// Initial state
this.state = {
    buttonEnabled : true
};


// onClick function
onClick(event){
    this.setState({buttonEnabled: false});   
}

   render() {
     const { buttonEnabled } = this.state;
    return (
      <div>
        <button onClick={this.onClick} disabled={buttonEnabled}>
          Your content here
        <button>
      </div>
    )
  }

score 0 · Answer 3 · answered Jun 11 '19 at 04:01

// declare some variable for holding your button's state
state = {
  disabled: false
}

...

onConfirmButtonClick () => {
  // set state.disabled as true
  this.setState({ disabled: true })
}


render () {
  return (

    ...

    <button
      disabled={this.state.disabled} // add disabled attribute to your button along with your state
      type="button"
      className="btn btn-info round btn-glow px-2 float-right"
    >
      Confirm
    </button>
  )
}

score 0 · Answer 4 · answered Jun 11 '19 at 04:14

Working code in the link: https://codepen.io/stanlee94/pen/gNOLxb

class Button extends React.Component {
  state = {
    disabled: false,
    pointerStyle: 'pointer'
  }

  handleClick = () => {
    //Do your logic here
    console.log('Record added');
    this.setState({
      disabled: true,
      pointerStyle: 'no-drop'
    });
  }

  render() {
    return(
    <button disabled={this.state.disabled} type="button" onClick={this.handleClick}
      style={{ cursor: this.state.pointerStyle }}>Confirm</button>
    );
  }
}

It will add an invalid type of pointer after you click to provide a good user experience to your user.

How to disable a button after clicking?

4 Answers4