React Checkbox sendet nicht onChange
TLDR: Verwende defaultChecked anstelle von checked und arbeite hier mit jsbinhttp: //jsbin.com/mecimayawe/1/edit? js, output
Versuchen Sie, ein einfaches Kontrollkästchen einzurichten, dessen Bezeichnungstext durchgestrichen wird, wenn es aktiviert ist. Aus irgendeinem Grund wird handleChange nicht ausgelöst, wenn ich die Komponente verwende. Kann mir jemand erklären, was ich falsch mache?
var CrossoutCheckbox = React.createClass({
getInitialState: function () {
return {
complete: (!!this.props.complete) || false
};
},
handleChange: function(){
console.log('handleChange', this.refs.complete.checked); // Never gets logged
this.setState({
complete: this.refs.complete.checked
});
},
render: function(){
var labelStyle={
'text-decoration': this.state.complete?'line-through':''
};
return (
<span>
<label style={labelStyle}>
<input
type="checkbox"
checked={this.state.complete}
ref="complete"
onChange={this.handleChange}
/>
{this.props.text}
</label>
</span>
);
}
});
Verwendung
React.renderComponent(CrossoutCheckbox({text: "Text Text", complete: false}), mountNode);
Lösung
Using checked lässt den zugrunde liegenden Wert (scheinbar) nicht ändern und ruft daher den onChange-Handler nicht auf. Das Umschalten auf defaultChecked scheint dies zu beheben:
var CrossoutCheckbox = React.createClass({
getInitialState: function () {
return {
complete: (!!this.props.complete) || false
};
},
handleChange: function(){
this.setState({
complete: !this.state.complete
});
},
render: function(){
var labelStyle={
'text-decoration': this.state.complete?'line-through':''
};
return (
<span>
<label style={labelStyle}>
<input
type="checkbox"
defaultChecked={this.state.complete}
ref="complete"
onChange={this.handleChange}
/>
{this.props.text}
</label>
</span>
);
}
});