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

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

Tengo una verificación de estado booleana en el constructor de mi componente:

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

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

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

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

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

Muchas gracias de antemano.

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

En tu caso:

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

Ver documentos

Dado que esta respuesta se está volviendo popular, agregando el enfoque que debería usarse para React Hooks (v16.8 +):

Si está utilizando el useStategancho, utilice el siguiente código (en caso de que su nuevo estado dependa del estado anterior):

const [check, setCheck] = useState(false);
// ...
setCheck(prevCheck => prevCheck + 1);

Deberías usar en this.state.checklugar de check.valueaquí:

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

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

Utilice checkedpara obtener el valor. Durante onChange, checkedserá truey 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>

Aquí hay un ejemplo usando ganchos (requiere React> = 16.8.0)

// import React, { useState } from 'react';
const { useState } = React;

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"><div>

También puede usar el useStategancho de React para declarar el estado local de un componente de función. El estado inicial de la variable toggledse ha pasado como argumento al método .useState.

import { render } from 'react-dom';
import React from "react";

type Props = {
  text: string,
  onClick(event: React.MouseEvent<HTMLButtonElement>): void,
};

export function HelloWorldButton(props: Props) {
  const [toggled, setToggled] = React.useState(false); // returns a stateful value, and a function to update it
  return <button
  onClick={(event) => {
    setToggled(!toggled);
    props.onClick(event);
  }}
  >{props.text} (toggled: {toggled.toString()})</button>;
}


render(<HelloWorldButton text='Hello World' onClick={() => console.log('clicked!')} />, document.getElementById('root'));

https://stackblitz.com/edit/react-ts-qga3vc

Tratar:

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

Usar check: !check.valuesignifica que está buscando el checkobjeto, que no ha declarado.

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

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

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

Dependiendo de su contexto; esto le permitirá actualizar el estado dada la función mouseEnter. De cualquier manera, al establecer un valor de estado en verdadero: falso, puede actualizar ese valor de estado dada cualquier función estableciéndolo en el valor opuesto con!this.state.variable

state = {
  hover: false
}

onMouseEnter = () => {
  this.setState({
    hover: !this.state.hover
  });
};

Llegué a esta página cuando estaba buscando usar el estado de alternancia en el componente React usando Redux, pero no encuentro aquí ningún enfoque que use el mismo.

Entonces, creo que podría ayudar a alguien que estaba luchando por implementar el estado de alternancia 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" />

Mi función Toggle Popup va 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 activado.

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

Gracias.