React：动态生成 <select> 元素 - 在映射元素中设置 'selected' 状态

Question

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

这是我要进行的操作：

见笔 dynamic select by Archibald Hammer (@archaeopteryx) on CodePen.

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

问题是 select 元素中的选项不会触发任何事件，更改发生在 select 元素中而不是选项中。您所要做的就是将 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>
)

对不起，我忘了添加现场样本link： https://codesandbox.io/s/31AyQ2woR

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

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

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

React：动态生成 <select> 元素 - 在映射元素中设置 'selected' 状态

React: Dynamically generated <select> elements - setting 'selected' state in a mapped element

forms

setstate

lodash

reactjs