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

【问题标题】：Identify which [SelectField] [DropDownMenu] fired onChange确定哪个 [SelectField] [DropDownMenu] 触发了 onChange
【发布时间】：2017-01-18 22:14:51
【问题描述】：

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

【问题讨论】：

标签： material-ui

【解决方案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>

【讨论】：

有没有办法从event 对象中获取值？问题是我在测试期间使用酶来模拟更改事件，我只能将事件对象传递给它：selectField.simulate('change', { target: { value: 'newValue' }, });
或者您可以尝试将onChange 函数更改为this.setState({ [type]: value || event.target.value })
嗯，这不是很好，但可能是一个临时解决方案。似乎只是MaterialUI 的工作方式，并且无法从事件对象中获取它。在这种情况下，Enzyme 似乎也不支持使用更多参数 (event, index, value) 模拟 onChange。干杯！