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>

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

1 个答案: