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

Question

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.

knoefel · Accepted Answer · 2021-11-02 20:28:48Z

2

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} /> } />

edited Nov 2, 2021 at 20:28

answered Nov 2, 2021 at 16:25

knoefel

7,0383 gold badges39 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Gotey Over a year ago

I don't understand how to pass the onChange method through field , I get an error when I try this code ` Unexpected token, expected "," (118:37) `

knoefel Over a year ago

Sorry, the template had a syntax error. I updated the answer.

Gotey Over a year ago

thank you, although I do not understand how could I input my onChange function

knoefel Over a year ago

What do you mean by input your onChange function? What do you want to achieve?

Gotey Over a year ago

when a user writes anything on the input, this function handlePriceInputChange triggers

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related