Estoy tratando de tener una casilla de verificación que cambie dinámicamente un nombre de clase de otra etiqueta. Ahí está mi código:
import "bootstrap/dist/css/bootstrap.min.css"; class Task extends Component { state = { task: "DevApp", }; isChecked = () => { console.log("True"); return true; }; render() { return ( <React.Fragment> <span className="bg-warning">{this.state.task}</span> <label> <input type="checkbox" id="myCheck" /> </label> <span className={this.getClassBadge()}>Done</span>] </React.Fragment> ); } getClassBadge() { var x = document.getElementById("myCheck").checked; if (x) { return "badge m-2 bg-warning"; } else { return "badge m-2 bg-primnary"; } } } export default Task; Y obtengo TypeError: Cannot read properties of null (reading 'checked')
He intentado de esta manera:
render() { return ( <React.Fragment> <span className="bg-warning">{this.state.task}</span> <label> <input type="checkbox" id="myCheck" /> </label> <span className={this.getClassBadge()}>Done</span>] </React.Fragment> <script> getClassBadge() { var x = document.getElementById("myCheck").checked; if (x) { return "badge m-2 bg-warning"; } else { return "badge m-2 bg-primnary"; } } </script> ); }pero todo está subrayado en rojo. Me gustaría tener una casilla de verificación y, si la casilla de verificación está marcada, el nombre de clase del siguiente tramo cambiará para tener un efecto genial. ¿Puede alguien por favor ayudarme? Lo siento si es muy básico, pero solo estoy comenzando :)
El TypeError: Cannot read properties of null (reading 'checked') se debe a que cuando renderiza por primera vez, su casilla de verificación con esa identificación aún no está montada en el DOM. Por eso document.getElementById("myCheck") devuelve nulo.
La mayoría de las veces con React no deberías usar las funciones del objeto del documento.
En su lugar, debe usar el estado de React. Como está usando un componente de clase, puede usar this.state para tener una propiedad cuyo valor indica si la casilla de verificación está marcada o no. La casilla de verificación necesita un controlador de cambios, algo así como
<input type="checkbox" id="myCheck" onChange={(state) => this.setState({isChecked: !state.isChecked})} />
Luego, en getClassBadge , simplemente verifique el estado:
return this.state.isChecked ? "badge m-2 bg-warning" : "badge m-2 bg-primnary"