Как обрабатывать событие выбора в поле выбора?

Привет, я пытаюсь реализовать поле выбора в своем приложении для реагирования. Я использую npm из https://www.npmjs.com/package/реагировать-выбрать. Ниже мой код.

const options = [
  { value: 'Current', label: 'Current' },
  { value: 'Future', label: 'Future' },
  { value: 'Closed', label: 'Closed' },
];
export class EditParametersPanelComponent extends React.Component {
 this.state = {
 selectedOption: null,
 }
handleChangeEvent(selectedOption) {
    this.setState({ selectedOption });
    console.info('Option selected:', selectedOption);
  }

render() {
    const { selectedOption } = this.state;
       return (
       <Select
              instanceId = "storeFilter"
              value = {selectedOption}
              onChange = {this.handleChangeEvent}
              options = {options}
              placeholder = "Store"
            />,
         );
  }
}

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

1. Uncaught TypeError: this.setState is not a function
2. Warning: Failed prop type: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.

Может ли кто-нибудь помочь мне определить и исправить эту ошибку? Любая помощь будет принята с благодарностью. Спасибо

Вам нужно связать this.handleChangeEvent с this. reactjs.org/docs/handling-events.html

— 03.04.2019 10:49

reactjs

03.04.2019 10:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

390

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

вы должны использовать функцию стрелки для привязки

handleChangeEvent = selectedOption => {
    this.setState({ selectedOption });
    console.info('Option selected:', selectedOption);
  }

или вы можете использовать другой способ ниже

<Select
              instanceId = "storeFilter"
              value = {selectedOption}
              onChange = {this.handleChangeEvent.bind(this)}
              options = {options}
              placeholder = "Store"
            />,

Привет, спасибо, KKangil. Я менял как указано выше. Теперь начал получать ошибку ниже. Ошибка синтаксического анализа: Неожиданный токен =. Нужно ли мне что-то здесь менять?

— 03.04.2019 10:54

Сможете ли вы получить результат console.info('Option selected:', selectedOption);?

— 03.04.2019 10:57

да нет. Большое спасибо за помощь. Я добавил this.handleChangeEvent = this.handleChangeEvent.bind(this);

— 03.04.2019 11:09

03.04.2019 10:49