Ошибка при передаче события в handleChange для элемента ввода компонента класса React?

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня возникли проблемы с пониманием того, как перейти event.target.value в мой setState ниже.

Я думал, что первое событие ( = event = ) будет передано при закрытии и будет доступно для возврата, но я получаю undefined при отладке этого.

К чему нужно сразу перейти event.target.value ?

 class InputElement1CC extends React.Component {
  state = {
    inputText: "",
    historyList: []
  };

  handleChange = event => {
    this.setState(previousState => {
      return {
        inputText: event.target.value,
        historyList: [...previousState.historyList, event.target.value]
      };
    });
  };

  render() {
    return (
      <div>
        <a href="/">home</a>
        <h1>InputElement1CC - Class Component</h1>
        <input placeholder="Enter Some Text" onChange={this.handleChange} />
        <br />
        {this.state.inputText}
        <hr />
        <br />
        <ul>
          {this.state.historyList.map(rec => {
            return <div>{rec}</div>;
          })}
        </ul>
      </div>
    );
  }
}

export default InputElement1CC;
  

Комментарии:

1. Как выглядит вызываемый код handleChange ?

2. Я обновлен, чтобы включить полный компонент

Ответ №1:

Установите значение переменной и используйте эту переменную. Что-то вроде этого:

  handleChange = event => {
    const value = event.target.value;
    this.setState(
      state => ({
        inputText: value,
        historyList: [...state.historyList, value]
      }),
      () => console.log("state", this.state)
    );
  };
  

Комментарии:

1. Это сработало. ES6 дает нам какую-либо помощь в этом? Есть ли способ сделать это, не вводя contant в область действия этой внутренней функции?

2. Это связано с тем, как React обрабатывает синтетические события. Этим все сказано. Я думаю, если бы вы действительно хотели, вы могли бы использовать nativeEvent , как описано здесь .