提取组件时无法读取属性 'focus' of null 错误

Question

我想用 Ant Design Autocomplete 实现 Algolia 搜索。但是当我尝试提取 SearchInput 组件时出现 Cannot read property 'focus' of null 错误（没有提取，即当我将它留在同一个文件中时，它工作正常）。这是工作代码：

import React, { useState } from 'react'
import { AutoComplete, Input } from 'antd'

const SearchAutocomplete = connectAutoComplete(
  ({ hits, currentRefinement, refine }) => {

    ...

    return (
      <AutoComplete
        options={options}
        onSelect={onSelect}
        onSearch={handleSearch}
        open={open}
      >
        <Input
          value={currentRefinement}
          onChange={e => refine(e.currentTarget.value)}
        />
      </AutoComplete>
    );
  }
);

但是当我将 Input 移动到像这样的单独组件时它不起作用：

import React, { useState } from 'react'
import { AutoComplete } from 'antd'
import SearchInput from './SearchInput'

const SearchAutocomplete = connectAutoComplete(
  ({ hits, currentRefinement, refine }) => {

    ...

    return (
      <AutoComplete
        options={options}
        onSelect={onSelect}
        onSearch={handleSearch}
        open={open}
      >
        <SearchInput value={currentRefinement} onChange={e => refine(e.currentTarget.value)}/>
      </AutoComplete>
    );
  }
);

以及 SearchInput 组件本身：

import React from 'react'
import { Input } from 'antd'

const SearchInput = props => {
  const { value, onChange} = props;

  return (
    <Input
      value={value}
      onChange={onChange}
    />
  )
}

这里是 link 到 codesandbox 提取的组件。我该如何解决这个错误？

Answer 1

将 React.forwardRef() 添加到 SearchInput 解决了问题：

const SearchInput = React.forwardRef((props, ref) => {
  const { onChange } = props;

  return (
    <Input.Search
      onChange={onChange}
      ref={ref}
    />
  )
})

提取组件时无法读取属性 'focus' of null 错误

Cannot read property 'focus' of null error when extracting component

reactjs

algolia

antd

提取组件时无法读取 属性 'focus' of null 错误

Cannot read property 'focus' of null error when extracting component

reactjs

algolia

antd

提取组件时无法读取属性 'focus' of null 错误