反应选择映射问题答案

【问题标题】：React Select mapping issue反应选择映射问题
【发布时间】：2018-03-10 02:30:51
【问题描述】：

我在我的项目中使用react-select，我在map 中使用它：

renderItems() {
  this.props.items.map(item => (
    <Select
      id="options"
      value={this.state.optionSelected}
      onChange={this.onChangeOption}
      options={this.showOptions()}
    />
  );
}

它正确显示了我所有项目的所有选项，但现在我无法摆脱选择...

基本上，当我在单个项目上选择一个选项时，该选项会针对所有项目发生变化...

这是我到目前为止所做的：

onChangeOption(e) {
  this.setState({ optionSelected: e.value });
}

如何调整它以仅更改我希望更改的选项？

谢谢

【问题讨论】：

它改变了一切，因为它们都依赖于单个变量。
没关系...但是我该如何解决呢？
使它们每个都依赖于不同的变量
如果您有每个项目的唯一标识符（例如 id），您可以更新特定项目的状态，而不是全部。
因为它是动态的，你能回答显示它的例子的问题吗？

标签： javascript reactjs react-select

【解决方案1】：

您对所有选择组件使用相同的更改处理程序，然后为所有选择组件设置相同的状态值。要解决这个问题，您需要将您的选择组件与一个处理它们自己的状态和更改事件的容器组件分开，或者您需要为每个选择组件提供一个唯一的状态值。

示例

renderItems() {
  this.props.items.map(item => (
    <Select
      id="options"
      value={this.state.optionSelected[item.id]}
      onChange={(event) => this.onChangeOption(event, item.id)}
      options={this.showOptions()}
    />
  );
}

onChangeOption(event, itemId) {
  this.setState((prevState) => { 
    const prevStateClone = Object.assign({}, prevState);
    prevStateClone.optionSelected[itemId] = event.target.value;
    return prevStateClone;
  });
}

【讨论】：

【解决方案2】：

不要将optionSelected 设为字符串变量，而是将其设为状态数组。现在执行以下操作。

renderItems() {
  this.props.items.map(item, index => (
    <Select
      id="options"
      value={this.state.optionSelected[index]}
      onChange={(selectedValue) => this.onChangeOption(selectedValue, index)}
      options={this.showOptions()}
    />
  );
}

onChangeOption(selectedValue, index) {
  const optionSelected = this.state.optionSelected.slice() // slicing to get new copy of optionSelected instead of referencing to old one which causes mutation 
  optionSelected[index] = selectedValue
  this.setState({optionSelected: optionSelected})
}

您所做的是使用单个变量来保存选择框的值。因此，如果有人更改，它将反映所有选择框

【讨论】：

【解决方案3】：

试试cloning the object to a new object，或者如果这个optionSelected是一个类，你可以实现一个构造函数来克隆它：

export class optionSelectedClass {
    myfield = '';

    constructor(fields){
        this.myField = fields.myField;
    }
}

甚至

export class optionSelectedClass {
    myfield = '';

    constructor(fields){
        for (let f in fields) {
            if (!this[f]) {
                this[f] = fields[f];
            }
        }
    }
}

【讨论】：