为什么 handlesubmit 不适用于此 react-hook-form 实现？

Question

我有这个表格：

      <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().

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

Answer 1

您对 register 的使用不正确，因为 v7 it will return an object instead of a ref，它可以传播到一个组件。现在您正在尝试将对象传递给 innerRef 而不是实际的 ref，因此出现错误。

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

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

为什么 handlesubmit 不适用于此 react-hook-form 实现？

Why handlesubmit is not working on this react-hook-form implementation?

reactjs

react-hook-form