Diable the button , enable button after another button clock

Admin 1
Viewed 59

I want that until the Copy List To Below get clicked I want to disable to Save button.

Currently this is the Copy List To Below button

<button type="button" className={classes["copy-btn"] + " btn-cancel mt-3"} onClick={(event) => this.copyData(event)}>Copy List To Below {_.size(this.state.protestList) > 1 ? _.size(this.state.protestList) + " Groups" : 'Group'} </button>

And this is my Save button

     <button type="submit" className={classes["save-btn"] + " btn-save"} onClick={(event) => this.saveData(event)}>Save</button>

And below is the respected functions

    saveDate = (event, data) => {
        if(event) {
            //Do something
        }
        else {
            //Return Error
        }
    }

    copyData = (event, data) => {
            if(event) {
                //Do something
            }
            else {
                //Return Error
            }
        }

As I said only if Copy is done then only save button should be able get clicked

reactjs ecmascript-6 javascript
2 Answers

Give two ids and add click event and toggle button disable property like this. Make it simple. Your buttons has unnecessary attributes, please remove those.

CORE JAVASCRIPT

<button type="button" id="coptBtn" class ="btn-cancel mt-3" >Copy List To Below</button>
<button id="saveBtn" type="submit" class="" >Save</button>

var coptBtn  = document.getElementById('coptBtn');
var saveBtn  = document.getElementById('saveBtn');
saveBtn.disabled = true;
coptBtn.addEventListener('click', (evt) => {
    saveBtn.disabled = false;
 });

REACT JS

var App = React.createClass({
  getInitialState() {
    return {isDisable: false}
  }, 
  handleClick(e) {
    this.setState({isDisable: true})
  },
  render() {
    return <div>
      <button type="button" onClick={this.handleClick} >Copy List To Below</button>
      <button type="button" disabled={!this.state.isDisable}>Save</button>
   </div>
  } 
});
user_97390440

Try this code.. 

copyData() {
    //your existing code
    this.setState({copied: true})
        }

    <button type="submit" disable={!this.state.copied} className={classes["save-btn"] + " btn-save"} onClick={(event) => this.saveData(event)}>Save</button>
user_62434740
Related