material-ui - 确定哪个 [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>