Este es un ejemplo rápido de cómo implementar un campo de casilla de verificación obligatorio en React con la biblioteca React Hook Form. Para obtener un ejemplo de formulario de registro más detallado que incluye muchos otros campos, consulte React - Ejemplo de validación de formulario con React Hook Form .

Aquí está en acción:

(Ver StackBlitz en https://stackblitz.com/edit/react-hook-form-required-checkbox-example )

Componente de aplicación de casilla de verificación requerida de formulario de enlace de reacción

El componente de la aplicación contiene un formulario de ejemplo creado con la biblioteca React Hook Form que contiene una única casilla de verificación obligatoria.

hacer un juego de cartas en unity

Las reglas de validación de formularios se definen con la biblioteca de validación de esquemas Yup y se pasan a React Hook Form useForm() función, para obtener más información sobre Sí, consulte https://github.com/jquense/yup .

La casilla de verificación se establece como obligatoria con la regla Yup.bool().oneOf([true], 'Accept Ts & Cs is required').

El useForm() La función de gancho devuelve un objeto con métodos para trabajar con un formulario, incluido el registro de entradas, el manejo del envío del formulario, el restablecimiento del formulario, la visualización de errores y más, para obtener una lista completa, consulte https://react-hook-form.com/api#useForm .

El onSubmit() se llama al método cuando el formulario es válido y se envía, y simplemente muestra los datos del formulario en una alerta de JavaScript.

La plantilla JSX devuelta contiene el formulario con el campo de casilla de verificación requerido y el mensaje de validación. El campo del formulario se registra con el formulario React Hook usando el ref={register} atributo que registra la casilla de verificación con su name.

#reaccionar

jasonwatmore.com

React - Ejemplo de casilla de verificación requerida con el formulario React Hook

Este es un ejemplo rápido de cómo implementar un campo de casilla de verificación obligatorio en React con la biblioteca React Hook Form. Para obtener un ejemplo de formulario de registro más detallado que incluye un montón de otros campos, consulte React - Ejemplo de validación de formulario con el formulario React Hook.