TLDR: use defaultChecked en lugar de marcado, trabajando jsbin .
Intentando configurar una casilla de verificación simple que tachará el texto de la etiqueta cuando esté marcada. Por alguna razón, handleChange no se dispara cuando uso el componente. ¿Alguien puede explicar lo que estoy haciendo mal?
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>
);
}
});
Uso:
React.renderComponent(CrossoutCheckbox({text: "Text Text", complete: false}), mountNode);
Solución:
El uso de check no permite que el valor subyacente cambie (aparentemente) y, por lo tanto, no llama al controlador onChange. Cambiar a defaultChecked parece solucionar esto:
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>
);
}
});
this.refs.complete.getDOMNode().checked
. ver violín jsfiddle.net/d10xyqu1
this.setState({checked: !this.state.checked})
fácil que tener que almacenar un valor? Luego, un operador ternario en el atributo verificado:checked={this.state.checked ? 'checked': null}