问React:动态生成的<select>元素-在映射元素中设置“selected”状态

EN

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 (
      <div>
        <SelectComponent 
          name="testSelect" 
          items={ITEMS} 
          handleSelect={this.handleSelect}
        />
        <div>
          <p>Selected: {this.state.selected}</p>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'))