Почему выдает ошибку 'searchInput' из неопределенного

Question

Я хочу искать людей.Массив данных хранится в избыточном хранилище.Я пытаюсь выполнить поиск, но возникает ошибка.

Cannot read property 'searchInput' of undefined

В чем может быть проблема?

searchHandler(){
  console.log('findUser', this.searchInput.value);
  this.props.onFindPeople(this.searchInput.value)
}

Я добавляю пример код

Answer 1

Вы не привязываете функцию.Вам нужно привязать его в конструкторе, как показано ниже.Связывание требуется для того, чтобы получить доступ к этому и получить доступ к состоянию, реквизиту и изменению состояния.

Обратите внимание, что вам нужно привязать его только в конструкторе, а не где-либо еще в компоненте

 constructor(props){
      super(props);
      this.searchHandler = this.searchHandler.bind(this);
 }

 searchHandler(){
     console.log('findUser', this.searchInput.value);
     this.props.onFindPeople(this.searchInput.value);
 }

Или вы также можете использовать функцию стрелки, как Сагив упомянул в своем ответе.

Answer 2

Вы потеряли контекст this для обработчика событий.
Вы можете использовать функцию стрелки (которая использует лексический контекст для this):

  searchHandler = () => {
    console.log("findUser", this.searchInput.value);
    this.props.onFindPeople(this.searchInput.value);
  }

Или привязать к классу следующим образом:

  constructor(props){
    super(props);
    this.searchHandler = this.searchHandler.bind(this);
  }

Мы делаем это в constructor, потому что он будет выполняться только один раз.