Не удается прочитать свойство 'focus' ошибки null при извлечении компонента - PullRequest
Новая
       79

Не удается прочитать свойство 'focus' ошибки null при извлечении компонента

0 голосов
/ 13 июля 2020

Я хотел бы реализовать поиск Algolia с автозаполнением Ant Design. Но я получаю ошибку Cannot read property 'focus' of null, когда пытаюсь извлечь компонент SearchInput (без извлечения, т.е. когда я оставляю его в том же файле, он работает нормально). Вот рабочий код: 

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

Вот ссылка на codeandbox с извлеченным компонентом. Как исправить эту ошибку?

1 Ответ

0 голосов
/ 13 июля 2020

Добавление React.forwardRef() к SearchInput решило проблему: 

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

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