Estoy probando React-Hook-form
El código simple para la casilla de verificación es el siguiente:
import React from 'react' import { useForm } from 'react-hook-form' export default function App() { const { register, handleSubmit, formState: { errors }, } = useForm() const onSubmit = (data: any) => console.log(data) console.log(errors) return ( <div className='mx-auto justify-center p-32 flex'> <form onSubmit={handleSubmit(onSubmit)}> <div className='p-2'> <label htmlFor=''>January</label> <input type='checkbox' placeholder='January' {...register('January', {})} className='mx-3' checked /> </div> <div className='p-2'> <label htmlFor=''>February</label> <input type='checkbox' placeholder='February' {...register('February', {})} className='mx-3' /> </div> <input type='submit' /> </form> </div> ) }Puedo enviar el formulario correctamente, pero me gusta que la casilla de verificación de enero comience como una casilla marcada, pero cuando puse 'marcado' como se muestra en el código, de alguna manera no pude 'desmarcarlo'.
Parece que me falta algo y cualquier ayuda sería muy apreciada.
El problema de pasar checked es que le quita el control a useForm para administrar la casilla de verificación.
Imagine que la función register() devuelve { checked: true/false, onChange: changeHandler } . Entonces, si observamos los atributos, esto produce lo siguiente.
<input type='checkbox' placeholder='January' {...register('January', {})} className='mx-3' checked /> <input type='checkbox' placeholder='January' {...{ checked: true/false, onChange: changeHandler, }} className='mx-3' checked /> <input type='checkbox' placeholder='January' checked={true/false} onChange={changeHandler} className='mx-3' checked /> Dado que checked está presente dos veces, el último anulará al primero. En este caso, su checked es la última, por lo que anula el valor administrado por useForm .
Pasarlo antes de la llamada a register() tampoco lo ayudará, ya que su valor predeterminado se sobrescribirá con un valor administrado por useForm y, por lo tanto, nunca se usará.
Ahora que he aclarado por qué ocurre este problema, pasemos a la solución.
useForm le permite pasar valores predeterminados cuando llama inicialmente al gancho.
const { register, handleSubmit, formState: { errors }, } = useForm({ defaultValues: { January: true } }); // ... <input type='checkbox' {...register("January")} className='mx-3' /> Alternativamente, en lugar de dar a cada casilla de verificación su propio nombre, también podría usar "months" . Si hay varias casillas de verificación con el mismo nombre, el resultado no será true / false , sino una matriz que contiene los valores.
const { register, handleSubmit, formState: { errors }, } = useForm({ defaultValues: { months: ["January"] } // only January ^ is checked by default }); //... <input type='checkbox' value='January' {...register("months")} className='mx-3' /> <input type='checkbox' value='February' {...register("months")} className='mx-3' />El código de trabajo completo basado en @3limin4tOr
import React, { useState } from 'react' import { useForm } from 'react-hook-form' export default function App() { const { register, handleSubmit, formState: { errors }, } = useForm({ defaultValues: { months: ['January'] }, }) const onSubmit = (data: any) => console.log(data) console.log(errors) return ( <div className='mx-auto justify-center p-32 flex'> <form onSubmit={handleSubmit(onSubmit)}> <div className='p-2'> <label htmlFor=''>January</label> <input type='checkbox' value='January' placeholder='January' {...register('months')} className='mx-3' /> </div> <div className='p-2'> <label htmlFor=''>February</label> <input type='checkbox' value='February' placeholder='February' {...register('months')} className='mx-3' /> </div> <input type='submit' /> </form> </div> ) }