如何将处理程序附加到 React Bootstrap select 组件？

Question

我尝试附加事件处理程序以响应 bootstrap select 组件 bootstrap select component。

class MyComponent extends React.Component {
  constructor(props) {
    super();
    this.state = {
      value: 'initial'
    };
  }
  handleSelect(value) {
    console.log(value);
    this.setState({
      value: value
    });
  }

  render() {
    return (
      <div>
        <div> selected value { this.state.value }</div>
        <FormControl
          componentClass="select"
          placeholder="select"
          onChange={this.handleSelect.bind(this)}
        >
          <option value="test" eventKey="select">select</option>
          <option value="asdas" eventKey="other">...</option>
        </FormControl>
      </div>
    );
  }
}

但在 handleSelect 而不是单击的选项值中，我得到了一些代理对象。

Here is CodePen showing the problem.

将处理程序附加到 FormControl 的正确方法是什么？

Answer 1

onChange 事件处理程序中的第一个参数是事件对象。您可以通过查看事件目标来访问所选值 - evt.target.value:

handleSelect(evt) {
  console.log(evt.target.value);
  this.setState({
    value: evt.target.value
  });
}