Necesito cambiar el estado de un componente según la casilla de verificación, hay un problema extraño, el valor en setState es el inverso del valor de event.target.checked.

Basado en el código anterior:

Si .target.checked === verdadero => this.setState establece {[event.target.id]: falso

Si .target.checked === false => this.setState set {[event.target.id]: true

handleChange(event) {
    if ( event.target.getAttribute('type') == "text"){
        this.setState({ [event.target.id]: event.target.value });
    }else if ( event.target.getAttribute('type') == "checkbox") {
        this.setState({ [event.target.id]: event.target.checked });
    }
}
0
red 9 may. 2019 a las 18:22

3 respuestas

La mejor respuesta

Resuelto, el problema es la naturaleza asincrónica de setState, ahora uso el nuevo estado con una devolución de llamada y todo funciona bien.

this.setState({ [fieldId]: fieldValue }, () => { console.log(this.state); } 
0
red 10 may. 2019 a las 09:27

Simplemente agregue un prefijo ! a event.target.checked para invertir su valor

this.setState({ [event.target.id]: !event.target.checked });
0
Rannie Aguilar Peralta 9 may. 2019 a las 15:29

Debería estar usando el opuesto del valor anterior. Prueba esto

handleChange(event) {
    if ( event.target.getAttribute('type') == "text"){
        this.setState({ [event.target.id]: event.target.value });
    }else if ( event.target.getAttribute('type') == "checkbox") {
        this.setState({ [event.target.id]: !event.target.checked });
    }
}

Agregué un signo de exclamación antes de event.target.checked para indicar "No" el valor anterior.

0
Jake 9 may. 2019 a las 15:29
56062725