React：动态生成的 <select> 元素 - 在映射元素中设置“选择”状态

Question

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

这就是我正在做的事情：

请参阅 Archibald Hammer (@archaeopteryx) 在CodePen 上的钢笔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 (
      <div>
        <SelectComponent 
          name="testSelect" 
          items={ITEMS} 
          handleSelect={this.handleSelect}
        />
        <div>
          <p>Selected: {this.state.selected}</p>
        </div>
      </div>
    )
  }
}

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

此代码会按预期呈现下拉选择器，但不会触发所选项目的 setState。有什么想法吗？

另外，有没有人有任何解决此类问题的专业提示？您知道任何超级流畅的开发工具或找出正在传递哪些道具的方法等？

Answer 1

问题是选择元素中的选项不会触发任何事件，更改发生在选择元素而不是选项中。您所要做的就是将handleSelect 方法传递给<select> 组件：

const SelectComponent = (props) => (
  <select name={props.name}
    onChange={props.handleSelect}
  >
    {_.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} 
  >{props.text}</option>
)

抱歉，我忘记添加实时示例链接： https://codesandbox.io/s/31AyQ2woR

就调试技巧而言，在这种特殊情况下，只需知道事件是由选择组件触发的，而不是由选项元素触发的；)。但我一直使用的是 React 开发者工具：

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

https://addons.mozilla.org/es/firefox/addon/react-devtools/