Teniendo el siguiente componente:
import { yupResolver } from '@hookform/resolvers/yup'; import { useForm } from 'react-hook-form'; import * as yup from 'yup'; import { Input, TabsGroup, Button } from './ui-components'; import { usePostFrequency } from '../hooks/use-post-frequency'; const schema = yup.object().shape({ second: yup.number(), minute: yup.number(), triggerName: yup.string().required() }); export function FrequencySetter() { const [isEditMode, setEditMode] = useToggle(false); const emptyTrigger = { second: null, minute: null, triggerName: '' }; const { handleSubmit, register, reset } = useForm({ resolver: yupResolver(schema) }); const { mutate: postFrequency } = usePostFrequency(); const handleCancel = () => { setEditMode(); reset(emptyTrigger); }; const handleSubmitClick = handleSubmit((data) => { setEditMode(); postFrequency(data); }); const frequencyTabs = [ { name: 'per second', children: <div> <Input inputId='second' type='number' {...register('second')} /> </div> }, { name: 'per minute', children: <div> <Input inputId='minute' {...register('minute')} /> </div> } ]; return ( <div> <Input inputId='trigger-name' label='triggerName' {...register('triggerName')} /> <TabsGroup tabs={frequencyTabs} /> <Button title='cancel' onClick={handleCancel} /> <Button title='submit' onClick={handleSubmitClick} /> </div> ); } export default FrequencySetter;Que tiene que hacer:
Hay una funcionalidad de pestaña realizada por un componente importado, TabsGroup, que tiene 2 pestañas, muestra la entrada de segundos en una pestaña, la entrada de minutos en la otra pestaña.
El componente utiliza el formulario de gancho de reacción para la validación, hay 2 botones, cancelar y enviar por razones obvias.
El problema: los datos enviados deben contener el triggerName y uno de segundo o minuto, NO ambos. No sé cómo hacer eso: restablecer de alguna manera el valor de uno cuando estoy introduciendo datos en la entrada del otro.
¿Hay alguna forma de hacer esto?
Puede usar watch en los dos campos second y minute y usar useEffect para establecer el setValue del otro campo.
export function FrequencySetter() { //other code const { handleSubmit, register, reset, watch, setValue } = useForm({ resolver: yupResolver(schema) }); const second = watch("second"); const minute = watch("minute"); useEffect(() => { if (!!second) { setValue('minute', '') } }, [second]); useEffect(() => { if (!!minute) { setValue('second', '') } }, [minute]); //other code }