В этом коде ReactJS в компоненте я ожидал бы this.setState( {b_MyPartyCat: value} )
для обновления this.state.b_MyPartyCat
, поэтому два оператора console.log в updatePartyCategory()
показывают одно и то же значение, но они этого не делают.
var MyIconButton = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var b_buttonOn = false;
if (this.props.pressed === true) {
b_buttonOn = false;
}
else {
b_buttonOn = true;
}
this.props.updateFilter( b_buttonOn );
},
render: function() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input type="image" src={this.props.pressed ? this.props.onpic : this.props.offpic }></input>
</form>
</div>
);
}
});
var MyPartyCatButton = React.createClass({
render: function() {
return (
<MyIconButton pressed={this.props.pressed} updateFilter={this.props.updateFilter} onpic="static/images/icon1.jpeg" offpic="static/images/off-icon.jpg"/>
);
}
});
//
// Main App view
var MyHomeView = React.createClass({
getInitialState: function() {
// This is where I'll eventually get data from the server.
return {
b_MyPartyCat: true
};
},
updatePartyCategory: function(value) {
// Eventually will write value to the server.
this.setState( {b_MyPartyCat: value} );
console.log("INSIDE: MyHomeView() updatePartyCategory() value = " + value );
console.log("INSIDE: MyHomeView() updatePartyCategory() this.state.b_MyPartyCat = " + this.state.b_MyPartyCat );
},
render: function() {
return (
<div>
<MyPartyCatButton pressed={this.state.b_MyPartyCat} updateFilter={this.updatePartyCategory}/>
</div>
// Eventually will have 3 other categories i.e. Books, Skateboards, Trees !
);
}
});