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

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

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

Что сразу добраться до event.target.value?

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

  handleChangeEvent = 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.handleChangeEvent} />
        <br />
        {this.state.inputText}
        <hr />
        <br />
        <ul>
          {this.state.historyList.map(rec => {
            return <div>{rec}</div>;
          })}
        </ul>
      </div>
    );
  }
}

export default InputElement1CC;

Как выглядит код, вызывающий handleChangeEvent?

go_diego 10.04.2019 01:34

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

Pete 10.04.2019 02:07
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
169
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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

Pete 10.04.2019 03:38

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

go_diego 10.04.2019 17:26

Другие вопросы по теме