que - if boolean javascript

¿Cómo cambiar el estado booleano del componente de reacción?

Question

Me gustaría saber cómo cambiar un estado booleano de un componente de reacción. Por ejemplo:

Tengo un control de estado booleano en el constructor de mi componente:

constructor(props, context) { 
   super(props, context);

   this.state = {
      check: false
   };
};

Estoy intentando cambiar el estado cada vez que se hace clic en mi casilla de verificación, utilizando el método this.setState:

<label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !check.value})}/> Checkbox </label>

Por supuesto, recibo un error de referencia no capturado: la verificación no está definida . Entonces, ¿cómo puedo lograr esto?

Muchas gracias de antemano.

Answer 1

Como nadie publicó esto, estoy publicando la respuesta correcta. Si su nueva actualización de estado depende del estado anterior, utilice siempre la forma funcional de setState que acepta como argumento una función que devuelve un nuevo estado.

En tu caso:

this.setState(prevState => ({
  check: !prevState.check
}));

Ver docs

Answer 2

Debes usar this.state.check lugar de check.value aquí:

this.setState({check: !this.state.check})

Pero de todos modos es una mala práctica hacerlo de esta manera. Mucho mejor moverlo a un método separado y no escribir devoluciones de llamada directamente en el marcado.

Answer 3

Encontré esto lo más simple cuando se alternan valores booleanos. En pocas palabras, si el valor ya es verdadero, entonces lo establece en falso y viceversa. Tenga cuidado con los errores no definidos, asegúrese de que su propiedad haya sido definida antes de ejecutar

this.setState({
   propertyName: this.propertyName = !this.propertyName
});

Answer 4

Me aterrizaron en esta página cuando busco usar el estado de conmutación en el componente React con Redux, pero no encuentro ningún enfoque con el mismo.

Entonces, creo que podría ayudar a alguien que estaba luchando para implementar el estado de conmutación usando Redux.

Mi archivo reductor va aquí. Obtengo el estado inicial falso por defecto.

const INITIAL_STATE = { popup: false };
export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case "POPUP":
            return {
                ...state,
                popup: action.value
            };
        default:
            return state;
    }
    return state;
};

Cambio de estado al hacer clic en la imagen. Entonces, mi etiqueta img va aquí con la función onClick.

<img onClick={togglePopup} src={props.currentUser.image} className="avatar-image avatar-image--icon" />

La función de Mi Tupgle Popup aparece a continuación, que llama a Dispatcher.

const togglePopup = ev => {
    ev.preventDefault();
    props.handlePopup(!props.popup);
};

Esta llamada va a la siguiente función mapDispatchToProps que refleja el estado conmutado.

const mapDispatchToProps = dispatch => ({
    handlePopup: value => dispatch({ type: "POPUP", value })
});

Gracias.

Answer 5

Tratar:

<label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !this.state.check.value})}/> Checkbox </label>

El uso de check: !check.value significa que está buscando el objeto de check , que no ha declarado.

this.state.check especificar que desea el valor opuesto de this.state.check .

Answer 6

Utilice el checked para obtener el valor. Durante onChange , se marcará true y será un tipo de boolean .

¡Espero que esto ayude!

class A extends React.Component {
  constructor() {
    super()
    this.handleCheckBox = this.handleCheckBox.bind(this)
    this.state = {
      checked: false
    }
  }
  
  handleCheckBox(e) {
    this.setState({
      checked: e.target.checked
    })
  }
  
  render(){
    return <input type="checkbox" onChange={this.handleCheckBox} checked={this.state.checked} />
  }
}

ReactDOM.render(<A/>, document.getElementById(''app''))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>