使用React重新激活Boostrap按钮

时间:2017-04-13 11:22:21

标签: javascript reactjs button react-redux bootstrapping

嗨,我是新的React开发人员,我想,我想为你做一件事非常简单。我有一个ButtonToolbar,里面有3个按钮。其中一个按钮被禁用,我想在我点击其中一个按钮时“重新激活”它。它很简单,或者我需要使用Redux来做那件事?

提前致谢,如果我不清楚,请对不起,我接下来会给你我的代码。

var Alert = React.createClass({

  getInitialState: function(){ // On initialise le state de nos composants
    return {clicked : "none" , nbClicked : 0 } //avec clicked a false et nbclick a 0
  },

  goodButton : function() {
    this.setState({clicked: "good"}) //On met a jour letat clicked
    this.setState({nbClicked: this.state.nbClicked+1}) //on augmente le nombre de fois que l'on a clique
    var object = this.refs.reset;
    object.disabled = false;
    //alert("You clicked the right button !"); //on affiche un message d'alert
  },

  wrongButton : function() {
    this.setState({clicked: "wrong"})
    this.setState({nbClicked: this.state.nbClicked-1})
    //alert("You clicked the WRONG button !");
  },


  resetButton : function() {
    this.setState({clicked: "none"}) //On met a jour letat clicked
    this.setState({nbClicked: 0}) //on augmente le nombre de fois que l'on a clique
    //alert("You clicked the right button !"); //on affiche un message d'alert
  },

  **render: function() {
    var msg = this.state.clicked; //On defini une variable msg pour laffichage du h2
    /*if(this.state.clicked){ //Son contenus varie suivant letat de clicked
      msg = 'clicked';
    }
    else{
      msg = 'uncliked';
    }*/
    const wellStyles = {maxWidth: 500,margin:'10 auto 10px'};

    var nbClick = this.state.nbClicked; //on recupere letat nbClicked que lon stock dans nbClick
    var disable = this.state.disable

    return (
            <div className='well' style={wellStyles}>
              <ButtonToolbar >

                <Button bsStyle="success" ref='good' onClick={this.goodButton}>
                    Click me !
                </Button>
                <Button bsStyle="danger" ref='wrong' onClick={this.wrongButton}>
                    You must not click me !
                </Button >
                <Button bsStyle="primary" ref='reset' disabled onClick={this.resetButton} >
                    Reset All States !
                </Button >

            </ButtonToolbar>
              <h2>You have clicked on the {msg} button and total clicks {nbClick}</h2>
          </div>
    );
  }
});**

0 个答案:

没有答案