Блог

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

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

render() {
    const { selectedOption } = this.state;
       return (
       <Select
              instanceId="storeFilter"
              value={selectedOption}
              onChange={this.handleChange}
              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`. 
  

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

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

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

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

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