antd 使用自动完成包装自定义输入原因：无法读取未定义的 属性 'value'

Question

在带有 react 的 antd 中，如果我有类似下面的东西，一切正常：

<Form>
  <Form.Input>
    <SomeIntermadiateComp/>
...   

一些中间组件如下所示：

const SomeIntermadiateComp = React.forwardRef(({ value, onChange }: Props, ref: any) => (
  <Input
    ref={ref}
    value={value}
    onChange={(event) => {
      console.log(event);
      if (onChange) onChange(event.target.value);
    }}
  ...

一切正常，直到我尝试添加 AutoComplete

当我用 AutoComplete 包装中间组件时，例如：

<Form>
  <Form.Input>
    <AutoComplete>
        <SomeIntermadiateComp/>
        ...   

然后在更改或向中间组件提供输入时会导致错误。说:

Uncaught TypeError: Cannot read property 'value' of undefined
    at onInputChange (index.js:104)
    at onChange (SingleSelector.js:71)
    at onChange (Input.js:77)
    at onChange (SomeIntermadiateComp.tsx:28)

完整的跟踪是这样的：

onInputChange
node_modules/rc-select/es/Selector/index.js:104
  103 | var onInputChange = function onInputChange(event) {
> 104 |   var value = event.target.value; // Pasted text should replace back to origin content

onChange
node_modules/rc-select/es/Selector/SingleSelector.js:71
 69 | onChange: function onChange(e) {
  70 |   setInputChanged(true);
> 71 |   onInputChange(e);

onChange
node_modules/rc-select/es/Selector/Input.js:77
  76 | onChange: function onChange(event) {
> 77 |   _onChange(event);

onChange
src/components/SomeIntermadiateComp.tsx:28
  26 |     onChange={(event) => {
  27 |       console.log(`${event.target.value}--`);
> 28 |       if (onChange) onChange(event.target.value);

有趣的是，console.log(`${event.target.value}--/`); 记录按下的键。

Answer 1

解决方案：

if (onChange) onChange(event);

我猜你应该不写if (onChange) onChange(event.target.value); 因为内部 onChange 函数需要事件参数，而不是值。