来自 onChange 处理程序的参考材料 UI SelectField 组件答案

【问题标题】：Reference Material UI SelectField component from onChange handler来自 onChange 处理程序的参考材料 UI SelectField 组件
【发布时间】：2016-10-05 21:04:59
【问题描述】：

我有一个包含很多 SelectField 组件的表单 (15+) - 我试图避免使用多个更改处理程序函数，但我正在努力找出如何引用触发更改的特定选择所以我可以相应地更新状态。

我已尝试添加 id、ref 以及我之前见过的所有可能的解决方案，但没有任何效果。

<SelectField value={this.state.selectedFramework} onChange={this.handleChange} style={style}>
    <MenuItem value={0} primaryText="Please select..." />
    {this.props.frameworks.map(this.renderMenuItem)}
</SelectField>

我的变更处理程序如下：

handleChange = (event, index, value) => {
    this.setState({selectedFramework: value});
};

但这显然不能被多个选择字段组件使用，因为状态键是硬编码的。我需要引用触发更改的选择，以便知道要更新哪个状态键。

有什么建议吗？

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

创建箭头函数并传入选择字段的索引：

{this.state.selectFields.map((v, i) => {
    <SelectField value={v} onChange={(e, _, v) => this.handleChange(e, i, v)} style={style}>
        <MenuItem value={0} primaryText="Please select..." />
        {this.props.frameworks.map(this.renderMenuItem)}
    </SelectField>
}

handleChange = (event, index, value) => {
    const selectFields = this.state.selectFields.slice();
    selectFields[index] = value;
    this.setState({selectFields});
};

【讨论】：