No puedo cambiar el valor de la casilla de verificación de falso a verdadero al hacer clic en la casilla de verificación, no se llama al cambio.
la casilla de verificación debe cambiarse a verdadero cada vez que hacemos clic en la casilla de verificación
this.state = { checkedbox: false, } render() { <Checkbox label="test" value={checkedbox} onChange={this.handelCheck} /> } handelCheck = (event) => { this.setState({ checkedbox: event.target.checked }); }Necesita usar this.state en valor, intente lo siguiente
value={this.state.checkedbox}Depende de cómo esté registrando ese estado después de haberlo cambiado. setState proporciona una devolución de llamada que puede usar para hacer cosas después de que se haya completado el proceso asíncrono, como registrar el nuevo estado.
Dependiendo de si está utilizando una biblioteca o implementando su propio componente de Checkbox de checked , es mucho más significativo marcar en lugar de value para la propiedad de su componente.
Debería pasar el estado checked a su propiedad checked , no una variable aleatoria llamada checked .
En este breve ejemplo, he creado mi propio componente Checkbox para mostrarle cómo encaja todo.
const { Component } = React; class Example extends Component { constructor() { super(); this.state = { checked: false }; } // Set the state, and the call the callback // function to log the new state handleChange = (e) => { this.setState({ checked: e.target.checked }, () => { console.log(this.state.checked); }); } render() { return ( <div> <Checkbox label="test" checked={this.state.checked} handleChange={this.handleChange} /> </div> ); } }; class Checkbox extends Component { render() { const { checked, label, handleChange } = this.props; return ( <fieldset> <legend>{label}</legend> <input type="checkbox" checked={checked} onChange={handleChange} /> </fieldset> ) } } ReactDOM.render( <Example />, document.getElementById('react') ); input[type="checkbox"]:hover { cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>