Проблема с использованием React- Bootstrap -Typehead - PullRequest
Новая
       27

Проблема с использованием React- Bootstrap -Typehead

0 голосов
/ 05 марта 2020

Я строю гарнитуру с использованием типа-реактивного bootstrap и запускаю TypeError.

Подробности: Я могу успешно ввести в поле, параметры фильтра и использовать меню, однако после выбора параметра страница становится пустой и показывает эту ошибку:

"Ошибка типа: невозможно прочитать свойство 'onChangeState' из неопределенного" 

  160 | <Typeahead
  161 |   id="basic-typeahead-example"
  162 |   labelKey="state"
> 163 |   onChange={(e) => this.onChangeState(e)}
      | ^  164 |   options={[
  165 |     { state: 'AL' },
  166 |     { state: 'AK' },

Тип заголовка: 

function StateInput() {

  const [selected, setSelected] = useState([]);

  return (
    <>
      <Typeahead
        id="basic-typeahead-example"
        labelKey="state"
        onChange={(e) => this.onChangeState(e)}
        options={[
          { state: 'AL' },
          { state: 'AK' },
          { state: 'AZ' },
          { state: 'AR' },
          { state: 'CA' }
        ]}
        placeholder="Choose a state..."
        selected={selected}
        value={setSelected}
      />
    </>
  )
}

функция onChange : 

  onChangeState(e) {
    this.setState({
      state: e.target.value
    })
  }

1 Ответ

0 голосов
/ 06 марта 2020

Насколько я могу судить, есть несколько проблем.

  1. Я не уверен, где вы определяете onChangeState относительно StateInput, но ошибка возникает из-за this не правильно связан и поэтому не определен. Если метод исходит от родительского компонента, вы должны передать его как prop (props.onChangeState).
  2. Аргумент, передаваемый onChange typeahead, на самом деле массив выборок , а не событие.
  3. Реакция Bootstrap Typeahead не принимает value проп, поэтому setSelected ничего не делает там.

Следующее должно работать: 

const StateInput = (props) => {
  const [selected, setSelected] = useState([]);

  return (
    <Typeahead
      id="basic-typeahead-example"
      labelKey="state"
      onChange={setSelected}
      options={[
        { state: 'AL' },
        { state: 'AK' },
        { state: 'AZ' },
        { state: 'AR' },
        { state: 'CA' }
      ]}
      placeholder="Choose a state..."
      selected={selected}
    />
  );
};
...