材料UI - 我怎样才能有 2 个不同的选择字段具有相同的菜单项，但它会选择不同的选择

Question

我有 2 个选择字段，我希望它能用作 2 个不同的选择字段。我的代码正在工作，但是当我单击第一个选择字段时，第二个选择字段也将选择与第一个相同的菜单项。

如何将其更改为 2 个不同的选择字段？

    <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>

Answer 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>
}

Answer 2

如果

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