Uncaught TypeError: Невозможно прочитать свойство 'handleChange' из неопределенного

Question

• Я пытаюсь осуществить поиск по тексту, например, функция поиска текста в браузере
• похоже на это

- когда я набираю что-либо в текстовом поле и нажимаю на AccountCircle, оно должно двигаться дальше. я пытаюсь получить значение из метода handleChange и передать его в метод handleFind. - но это не работает, я получаю ошибку Uncaught TypeError: Невозможно прочитать свойство 'handleChange' из неопределенного - весь мой код не SearchBar.js - Можете ли вы сказать мне, как это исправить, чтобы в будущем я исправил это сам. - Предоставление моей песочницы и соответствующего фрагмента кода ниже.

https://codesandbox.io/s/yv1zpj874x

 handleChange(e) {
    console.log("e----------->", e); // your search bar text
    console.log("e----------->", e.target.value); // your search bar text
    let object = document.getElementById("myDiv");
    console.log(object.textContent); // your div text

    // now that you have the two strings you can do your search in your favorite way, for example:
    let searchBarText = [];
    searchBarText = e.target.value;
    console.log("searchBarText --->", searchBarText);

    let divText = object.textContent;
    console.log("divText --->", divText);

    if (divText.includes(searchBarText)) {
      console.log("the div text contains your search text");
    } else {
      console.log("the div text doesn't contain search text");
    }

    // this.setState({ testHighlight: response.data });

    // this.setState({ testHighlight: searchBarText });
    this.setState({ testHighlight: [searchBarText] });
    return e;
  }
  handleFind(e) {
    this.handleChange("text");
    console.log("e----------->", e); // your search bar text
    console.log("e----------->", e.target.value); // your search bar text
  }

 render() {
    return (
      <div className="input-container">
        <InputLabel htmlFor="input-with-icon-adornment">
          With a start adornment
        </InputLabel>
        <Input
          id="input-with-icon-adornment"
          onChange={this.handleChange}
          placeholder="Search..."
          startAdornment={
            <InputAdornment position="start">
              <AccountCircle onClick={this.handleFind} />
            </InputAdornment>
          }
        />

Answer 1

Хорошо, вот несколько вещей, на которые стоит обратить внимание:

1) Не читайте ничего из DOM при использовании React. DOM слушает React и обновляет соответственно, в большинстве случаев нет необходимости читать значения из него. Например:

let object = document.getElementById("myDiv");
console.log(object.textContent);

Вместо этого вы можете хранить все, что хотите, показанное в myDiv, внутри состояния, а затем отображать его оттуда:

this.state = { myDiv: 'some text here' }
render(){
  return(
    <div>{this.state.myDiv}</div>
  )
}

2) Измените handleFind(e) на функцию стрелки или свяжите ее, как вы сделали с handleChange(e). Вы также ожидаете аргумент e, который вы никогда не передадите, поэтому либо используйте

handleFind = () => { // code here }

или

handleFind(){ //code here }

3) Для handleFind, e.target.value - это не то, что вы ожидаете, даже если вы пропустите событие - поскольку вход не является целью, e.target.value будет неопределенным, даже если вы передадите его как :

<AccountCircle onClick={e => this.handleFind(e)} />

Вот несколько измененная версия, которая позволяет получать доступ к вводимому значению при каждом нажатии значка:

https://codesandbox.io/s/6lwx70y0rz

Некоторые материалы для чтения:

Краткое объяснение React Virtual DOM

Статья о функциях стрелок

Статья о состоянии реакции

Answer 2

Прежде всего, ваше выделение работает без нажатия на значок, потому что оно вызывает setState при каждом изменении ввода.

Кроме того, я вижу, что вы получаете предупреждение:

Предупреждение. Это синтетическое событие повторно используется по соображениям производительности.Если вы видите это, вы получаете доступ к методу isDefaultPrevented в освобожденном / аннулированном синтетическом событии.Это неоперационная функция.Если вам нужно сохранить оригинальное синтетическое событие, используйте event.persist ().См. https://reactjs.org/docs/events.html#event-pooling для получения дополнительной информации.

Используйте event.persist(), как упомянуто в документации, чтобы убедиться, что вы получите то, что вам нужно, в асинхронном режиме.

Другое дело - вы не связаны handleFind метод.Итак, вы должны сделать как с handleChange.

  constructor(props) {
    super(props);
    this.state = {
      testHighlight: []
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleFind = this.handleFind.bind(this);
  }

Третье - вы допустили ошибку в HighlighterImplementation, назвав componentWillRecieveProps вместо componentWillReceiveProps.

В будущем используйте ошибки консоли более тщательно, чтобы избежать непредвиденного поведения..

Здесь работает codepen.

Надеюсь, это помогло.