Material UI - 我怎样才能有 2 个具有相同 MenuItem 的不同选择字段，但它会以不同方式选择？答案

【问题标题】：MaterialUI - How can I have 2 different selectfield with same MenuItem but it will select differently?Material UI - 我怎样才能有 2 个具有相同 MenuItem 的不同选择字段，但它会以不同方式选择？
【发布时间】：2016-03-01 03:13:25
【问题描述】：

我有 2 个 SelectField，我希望它充当 2 个不同的 SelectField。我的代码正在运行，但是当我点击第一个 SelectField 时，第二个 SelectField 也会选择与第一个相同的 MenuItem。

如何将其更改为 2 个不同的 SelectField？

    <SelectField value={this.state.selectedBrandings} onChange={this.onBrandingsChange} id={t}>
        {_.map(this.state.brandings, (b) => {
          return <MenuItem value={b.name} primaryText={b.name} key={b.id}/>;
        })}
    </SelectField>

<SelectField value={this.state.selectedBrandings} onChange={this.onBrandingsChange} id={t}>
        {_.map(this.state.brandings, (b) => {
          return <MenuItem value={b.name} primaryText={b.name} key={b.id}/>;
        })}
    </SelectField>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

让它在这个代码上工作下面的函数：

onBrandingsChange = (event, index, value) => {
    var newBrandings = this.state.selectedOrder;
    newBrandings.prints.printMethod.push(value)
    this.setState({selectedOrder: newBrandings});
  }

渲染时

{_.map(this.state.test, (t, id) => {
    <SelectField value={this.state.selectedOrder.prints.printMethod[id]} onChange={this.onBrandingsChange}>
        {_.map(this.state.brandings, (b) => {
          return <MenuItem value={b.name} primaryText={b.name} key={b.id}/>;
        })}
    </SelectField>
}

【讨论】：

【解决方案2】：

如果两个选择字段从相同的状态获取值并在 onChange 中更新相同的状态，您不能期望它们的工作方式不同。您应该为它们设置两种不同的状态。

【讨论】：