0
172
ViewsLos formularios de gancho de reacción me muestran caracteres incorrectos (0) ingresados en el campo de texto y luego corrigen la longitud del campo en el segundo clic de envío
Estoy usando getValues con forma de gancho de reacción y luego intento representar la longitud de los caracteres del campo de texto en un mensaje de error cuando el usuario supera el límite. Veo 0/1046 caracteres cuando hago clic en enviar la primera vez y luego la segunda vez que veo el número correcto.
const titleValue = getValues('title') const descriptionValue = getValues('description') <TextField name='title' defaultValue='' label='Title*' control={control} css={{}} help={ errors.title?.type === 'required' || errors.title?.type === 'maxLength' ? errors.title.message : undefined } aria-label='title' rules={{ required: { value: true, message: 'Required' }, maxLength: { value: 1024, message: `${titleValue?.length || 0}/1024 maximum character length exceeded`, }, }} /> 
2 answers
Answer question0
react-hook-form proporcionó una respuesta https://github.com/react-hook-form/react-hook-form/discussions/7668
validate: (value) => { if (value.length >= 10) { // this will give you the correct value for your error message return `Please, enter a title with less than 10 characters (${value.length}/10)`; } } }}```0
Consulte useForm - getValues
Un ayudante optimizado para leer valores de formulario. La diferencia entre ver y getValues es que getValues no desencadenará nuevas renderizaciones ni se suscribirá a cambios de entrada.
Mientras que useForm, el reloj parece ajustarse más a sus necesidades.
Esto observará las entradas especificadas y devolverá sus valores. Es útil para determinar qué renderizar.
const titleValue = watch('title')