如何将处理程序附加到 React Bootstrap 选择组件？答案

【问题标题】：How to attach handler to React Bootstrap select component?如何将处理程序附加到 React Bootstrap 选择组件？
【发布时间】：2017-04-28 22:05:47
【问题描述】：

我尝试附加事件处理程序以响应引导选择组件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 的正确方法是什么？

【问题讨论】：

标签： twitter-bootstrap reactjs select event-handling react-bootstrap

【解决方案1】：

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

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

【讨论】：