时间戳

首页 > 解决方案 > 为什么 handlesubmit 不适用于这个 react-hook-form 实现？

reactjs - 为什么 handlesubmit 不适用于这个 react-hook-form 实现？

问题描述

我有这个表格：

      <form onSubmit={handleSubmit(onSubmit)}>
        <Input
          onChange={(ev) => handlePriceInputChange(ev)}
          type="number"
          value={price}
          innerRef={register("voucherPrice", { required: true })}
        ></Input>
        <p>{errors.voucherPrice?.message}</p>

        <Button
          variant="contained"
          sx={{ mt: 1, mr: 1 }}
          type="submit"
        >
          {"Continue"}
        </Button>
      </form>

我已经配置了 react-hook-form 像：

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });
  const onSubmit = (data) => {
    console.log("?", data);}

我试图console.log("?", data)在开发工具控制台上查看，我得到：

Warning: Unexpected ref object provided for input. Use either a ref-setter function or React.createRef().

但它似乎没有到达控制台日志。

标签： reactjsreact-hook-form

解决方案

您的使用register不正确，因为 v7它将返回一个对象而不是 ref，它可以传播到一个组件。现在您正在尝试将对象传递给innerRef而不是实际的ref，因此会出现错误。

在你的情况下，<Controller />如果你想将 传递ref给你的innerRef道具，你应该使用。

<Controller
  name="voucherPrice"
  control={control}
  rules={{ required: true }}
  render={({ field: { ref, ...field } }) => 
    <Input
      {...field}
      type="number"
      innerRef={ref}
    /> 
  }
/>

推荐阅读