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

Solución:

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 de setState que 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 useState hook, luego use el siguiente código (en caso de que su nuevo estado dependa del estado anterior):

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

Deberías usar this.state.check en lugar de check.value aquí:

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

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

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/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="root"><div>

---

---

Utiliza Nuestro Buscador