如何处理选择框中的选择事件？

Question

您好，我正在尝试在我的反应应用程序中实现选择框。我正在使用来自https://www.npmjs.com/package/react-select 的 npm。下面是我的代码。

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`. 

有人可以帮助我识别并修复此错误吗？任何帮助将不胜感激。谢谢

Answer 1

你必须使用箭头函数进行绑定

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

或者你可以使用下面的其他方式

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