reactjs - 如何在 Antd Input 上使用 React-Hook-Form？

Question

如何在 antd 输入上使用 react-hook-form？

通常是这样

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    defaultValues: {
      firstName: "",
      lastName: "",
      email: "",
      phoneNumber: "",
      password: "",
    },
  });

  const onSubmit = (data) => console.log(data);

// Render
            <Input
              {...register("firstName")}
              className="my-2"
              placeholder="First Name *"
            />

它适用于 MUI 文本字段但不适用于 Antd 输入。

我只得到空字符串；

非常感谢您的帮助

Answer 1

您可以使用“react-hook-form”中的 Controller 来包装 antd 输入。

Docs exampe

In your case it can be like this :

const App = () => {
  const {
    register,
    handleSubmit,
    control,
    formState: { errors }
  } = useForm({
    defaultValues: {
      firstName: "1",
      lastName: "",
      email: "",
      phoneNumber: "",
      password: ""
    }
  });

  return (
    <div className="App">
      <h1>antd version: {version}</h1>
      <Form>
        <Form.Item label="first name">
          <Controller
            name="firstName"
            control={control}
            render={({ field }) => (
              <Input {...field} className="my-2" placeholder="First Name *" />
            )}
          />
        </Form.Item>
      </Form>
    </div>
  );
};