嗨,我是新的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>
);
}
});**