I have a checkout cart where you have different cart items, and for each one you can change the quantity prior to purchase.
Here’s how the code looks:
JavaScript
x
79
79
1
import React, { useEffect, useState } from "react";
2
3
import PureInput from "./PureInput";
4
import { useForm, Controller } from "react-hook-form";
5
6
const CartInner = React.forwardRef(
7
(
8
{
9
control,
10
element,
11
value,
12
handleOnChange,
13
images,
14
name,
15
monthlyAmount,
16
price,
17
projectedGrowth,
18
id,
19
inputProps
20
}: any,
21
ref: any
22
) => {
23
return (
24
<div className="grid gap-8 grid-cols-2 mb-12 py-6 px-8 border-2 border-slate-200">
25
<div>
26
<PureInput
27
min={200}
28
max={price}
29
onChange={handleOnChange}
30
type="number"
31
step={200}
32
defaultValue={element.price}
33
id={id}
34
ref={ref}
35
{inputProps}
36
/>
37
</div>
38
</div>
39
);
40
}
41
);
42
43
export default function Checkout() {
44
const { control, handleSubmit } = useForm();
45
46
const handleOnChange = (index: any, e: any) => {
47
console.log(e, "e");
48
};
49
50
const onSubmit = async (data: any) => {
51
console.log(data, "data from Form.tsx");
52
};
53
54
return (
55
<form onSubmit={handleSubmit(onSubmit)} className="grid gap-8 grid-cols-3">
56
<div className="col-span-2">
57
{[0, 2].map((element, index) => {
58
return (
59
<fieldset key={index}>
60
<Controller
61
render={({ field }) => (
62
<CartInner
63
element={element}
64
handleOnChange={(e) => handleOnChange(index, e)}
65
{field}
66
/>
67
)}
68
name={`test.${index}.lastName`}
69
control={control}
70
/>
71
</fieldset>
72
);
73
})}
74
<button>Progess to payment</button>
75
</div>
76
</form>
77
);
78
}
79
And the PureInput:
JavaScript
1
21
21
1
import * as React from "react";
2
3
type IProps = any;
4
5
const PureInput = React.forwardRef(
6
({ className, id, onChange, inputProps }: IProps, ref: any) => {
7
return (
8
<input
9
id={id}
10
ref={ref}
11
onChange={onChange}
12
type="input"
13
className={`${className} block w-full bg-white text-black rounded-md border-2 font-bold border-grey-200 text-xl px-4 py-4 focus:border-orange-500 focus:ring-orange-500`}
14
{...inputProps}
15
/>
16
);
17
}
18
);
19
20
export default PureInput;
21
Everything works fine in terms of submitting the form. When I do, I get an array of whatever values I have entered into the input:
JavaScript
1
3
1
[{lastName: "1600"}
2
{lastName: "800"}]
3
My package versions:
JavaScript
1
3
1
"react-dom": "18.2.0",
2
"react-hook-form": "^7.29.0",
3
But my onChange no longer fires. How can I get the onChange to fire so I can log the value of the input inside <Checkout />
component?
Here’s a codesandbox if it helps
Advertisement
Answer
You can make the following changes to plug into onChange event
JavaScript
1
30
30
1
// pass an event handler name with different name
2
<PureInput
3
min={200}
4
max={price}
5
// pass a handler with different name as inputOptions overrides that prop
6
handleOnChange={handleOnChange}
7
type="number"
8
step={200}
9
defaultValue={element.price}
10
id={id}
11
ref={ref}
12
{inputProps}
13
/>
14
15
//plug into the default onchange to call you handler also
16
<input
17
id={id}
18
ref={ref}
19
onChange={(e) => {
20
console.log("on change");
21
// call react-hook-form onChange
22
onChange(e);
23
// call your handler
24
handleOnChange(e);
25
}}
26
type="input"
27
className={`${className} block w-full bg-white text-black rounded-md border-2 font-bold border-grey-200 text-xl px-4 py-4 focus:border-orange-500 focus:ring-orange-500`}
28
{...inputProps}
29
/>
30
Hope it helps you in solving your problem,
Cheers