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

【问题标题】：Why handlesubmit is not working on this react-hook-form implementation?为什么 handlesubmit 不适用于这个 react-hook-form 实现？
【发布时间】：2021-11-02 16:05:31
【问题描述】：

我有这个表格：

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

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

【问题讨论】：

标签： reactjs react-hook-form

【解决方案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}
    /> 
  }
/>

【讨论】：

我不明白如何通过 field 传递 onChange 方法，当我尝试此代码时出现错误 ` Unexpected token, expected "," (118:37) `
抱歉，模板有语法错误。我更新了答案。
谢谢，虽然我不明白怎么输入我的onChange函数
输入 onChange 函数是什么意思？你想达到什么目标？
当用户在输入上写任何东西时，这个函数handlePriceInputChange触发