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

I have this 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>

I have configurated react-hook-form like:

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

I am trying to see console.log("?", data) on the dev tools console, and I get:

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

But it doesn't seem to reach the console log.

CodePudding user response：

Your usage of register is incorrect, since v7 it will return an object instead of a ref, which can be spread to a component. Right now you are trying to pass an object to innerRef instead of an actual ref, hence the error.

In your case you should use <Controller /> if you want to pass the ref to your innerRef prop.

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