我正在尝试在 <select> 元素中处理动态生成的 <option> 的选择，我知道 onChange 触发器是我需要用来setState的，但我似乎无法让她正常工作。

下面是我正在做的事情：

请参阅 CodePen 上阿奇博尔德·哈默( @archaeopteryx )的the Pen dynamic select 。

​

import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'
const ITEMS = [
      { name: 'centos', text: 'centos', value: 'centosValue' },
      { name: 'ubuntu', text: 'ubuntu', value: 'ubuntuValue' },
const SelectComponent = (props) => (
  <select name={props.name}>
    {_.map(props.items, (item, i) => <Option
      key={i}
      name={item.name}
      value={item.value}
      text={item.text}
      handleSelect={props.handleSelect}
  </select>
const Option = (props) => (
  <option 
    value={props.value} 
    onChange={props.handleSelect}>{props.text}</option>
class App extends React.Component {
  constructor() {
    super()
    this.state = {
      selected: ''
    this.handleSelect = this.handleSelect.bind(this)
  handleSelect(e) {
    this.setState({selected: e.target.value})
  render() {
    return (
        <SelectComponent 
          name="testSelect" 
          items={ITEMS} 
          handleSelect={this.handleSelect}
          <p>Selected: {this.state.selected}</p>
ReactDOM.render(<App/>, document.getElementById('app'))

这段代码确实按照预期呈现了下拉选择器，但它没有触发所选项目上的setState。有什么想法吗？

另外，有没有人有解决这类问题的建议呢？有没有你知道的超级巧妙的开发工具或方法来找出哪些道具被通过了，等等？