Aquí está mi problema simplificado:
https://codesandbox.io/s/busy-fire-mm91r?file=/src/FormWrapper.tsx
Y el código:
export const FormItemWrapper = ({ children }) => { return <FormItem>{children}</FormItem>; }; export const FormWrapper = ({ children }) => { const { handleSubmit } = useForm(); const onSubmit = (data) => { console.log(data); // logs { } }; return <Form onFinish={handleSubmit(onSubmit)}>{children}</Form>; }; export default function App() { const { control, watch } = useForm(); console.log(watch()); // logs { } return ( <FormWrapper> <FormItemWrapper> <Controller control={control} name="tmp" render={({ field }) => <Input {...field} />} /> </FormItemWrapper> <FormItemWrapper> <Button htmlType="submit">Save</Button> </FormItemWrapper> </FormWrapper> ); }El problema:
React-hook-form no parece ver los datos que escribo. Puedo obtenerlos usando antd , pero no puedo con react-hook-form . ¿Por qué? ¿Qué me estoy perdiendo?
watch() registra solo una vez y registra { } . onSubmit registros { }
Ha creado dos instancias de formulario diferentes con la llamada useForm. Si desea obtener el contexto del formulario actual dentro del controlador, debe usar useFormContext y envolver su formulario en FormProvider.
Ejemplo de trabajo:
https://codesandbox.io/s/admirando-lehmann-mgd0i?file=/src/App.tsx