确定哪个[SelectField] [DropDownMenu]触发了onChange

Question

我以编程方式呈现多个SelectField和DropDownMenu组件.我正在尝试使用单个onChange处理程序函数,但我还没有找到引用触发事件的特定SelectField/DropDownMenu的方法,因此我可以相应地更新状态.为onChange事件传递的参数似乎不包含任何有用的信息来识别触发组件.有任何想法吗？

Answer 1

这是一个如何做到这一点的例子

https://jsfiddle.net/davidebarros/k9ng7bk9/

这是假设您熟悉es6箭头函数语法.

state = {
  dropDown1: 1,
  dropDown2: 4,
  selectfield1: null,
  selectfield2: null
}

onChange = (type) => (event, index, value) => {
    this.setState({
    [type]: value
}) 


//In your render method 
<SelectField
      floatingLabelText="Select Field 1"
      value={this.state.selectfield1}
      onChange={this.onChange("selectfield1")}>
      <MenuItem value={1} primaryText="Select 1, value 1" />
      <MenuItem value={2} primaryText="Select 1, value 2" />
</SelectField>