Реактивировать кнопку Boostrap с помощью React
Привет, я новый разработчик 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>
);
}
});**