In antd with react, If I’ve something like the below, everything works fine:
JavaScript
x
5
1
<Form>
2
<Form.Input>
3
<SomeIntermadiateComp/>
4
5
And that some intermediate component looks like this:
JavaScript
1
10
10
1
const SomeIntermadiateComp = React.forwardRef(({ value, onChange }: Props, ref: any) => (
2
<Input
3
ref={ref}
4
value={value}
5
onChange={(event) => {
6
console.log(event);
7
if (onChange) onChange(event.target.value);
8
}}
9
10
Everything works fine, until, I try to add AutoComplete
When I wrap the intermediate component with AutoComplete
, like:
JavaScript
1
6
1
<Form>
2
<Form.Input>
3
<AutoComplete>
4
<SomeIntermadiateComp/>
5
6
Then on changing or giving input to intermediate component cause error. Saying:
JavaScript
1
6
1
Uncaught TypeError: Cannot read property 'value' of undefined
2
at onInputChange (index.js:104)
3
at onChange (SingleSelector.js:71)
4
at onChange (Input.js:77)
5
at onChange (SomeIntermadiateComp.tsx:28)
6
Complete trace is something like:
JavaScript
1
22
22
1
onInputChange
2
node_modules/rc-select/es/Selector/index.js:104
3
103 | var onInputChange = function onInputChange(event) {
4
> 104 | var value = event.target.value; // Pasted text should replace back to origin content
5
6
onChange
7
node_modules/rc-select/es/Selector/SingleSelector.js:71
8
69 | onChange: function onChange(e) {
9
70 | setInputChanged(true);
10
> 71 | onInputChange(e);
11
12
onChange
13
node_modules/rc-select/es/Selector/Input.js:77
14
76 | onChange: function onChange(event) {
15
> 77 | _onChange(event);
16
17
onChange
18
src/components/SomeIntermadiateComp.tsx:28
19
26 | onChange={(event) => {
20
27 | console.log(`${event.target.value}--`);
21
> 28 | if (onChange) onChange(event.target.value);
22
And the funny part is, console.log(`${event.target.value}--/`);
logs the key pressed.
Advertisement
Answer
Solution:
JavaScript
1
2
1
if (onChange) onChange(event);
2
I guess you should NOT write if (onChange) onChange(event.target.value);
because inner onChange function needs event argument, not value.