Establecer el valor de la casilla de verificación en React

1. Casilla de verificación con una entrada controlada por valor en React
2. Establecer el valor de la casilla de verificación en React

Cada aplicación web necesita elementos de entrada donde los usuarios puedan ingresar texto, seleccionar una opción o marcar una casilla de verificación. En este artículo, discutiremos cómo manejar los elementos de entrada, específicamente las casillas de verificación en React.

Casilla de verificación con una entrada controlada por valor en React

Antes de discutir la implementación de una casilla de verificación controlada con un valor “marcado” en React, hablemos de las entradas controladas.

En React, hay componentes controlados y no controlados. Las entradas pueden ser cualquiera de estos dos tipos.

Un componente (o un elemento de entrada) se controla cuando obtiene su valor del estado y las acciones del usuario actualizan el estado.

Esto es lo que sucede cuando los usuarios cambian el valor en el campo de entrada:

1. Establezca el valor del campo desde el valor estado.
2. Introducir nuevos caracteres en el campo activa un evento onChange.
3. Configure el controlador para actualizar el estado para reflejar los cambios.
4. El valor del nuevo estado se muestra en el campo de entrada.

En otras palabras, existe un vínculo bidireccional entre el elemento de entrada y el estado. Los cambios en el elemento de entrada actualizan el estado y el elemento obtiene su valor del estado.

Establecer el valor de la casilla de verificación en React

Por lo general, puede establecer el atributo valor de un elemento de entrada para asegurarse de que obtiene su valor del estado. Con las casillas de verificación, usamos el atributo marcado.

Puede establecer el atributo marcado igual al valor booleano. Por lo tanto, el valor del estado debe ser “true” o “false”, no una cadena, un entero o cualquier otro tipo.

Veamos este ejemplo:

export default function App() {
  const [condition, setCondition] = useState(true);
  return (
    <div className="App">
      Interested?
      <input
        type="checkbox"
        checked={condition}
        onChange={() => setCondition(!condition)}
      />
    </div>
  );
}

Vea la demostración en vivo en CodeSandbox.

En este ejemplo, establecemos el atributo marcado de la casilla de verificación en la variable de estado condición. Inicializamos el valor de esta variable de estado usando el enlace useState().

Al inicializar una variable de estado, el argumento proporcionado a useState() será el valor inicial de la variable de estado. En este caso, la variable condición se inicializará como verdadera.

A continuación, actualice el estado para reflejar la entrada más reciente del usuario. Para eso, configuramos el atributo onChange para actualizar la variable de estado cada vez que hay un cambio en el componente.

En este caso, establecemos la variable de estado condición en el opuesto de su valor actual. Si actualmente es “true”, al cambiar la casilla de verificación (desmarcarla) se establecerá en “false”, y si actualmente es “false” (sin marcar), se establecerá en “true”.