React Select 映射问题

Question

我在我的项目中使用 react-select，并且在 map 中使用它，就像这样：

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

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

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

这是我目前所做的：

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

如何调整它以仅在我想更改的选项上更改？

谢谢

Answer 1

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

例子

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;
  });
}

Answer 2

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

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];
            }
        }
    }
}

Answer 3

与其创建 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})
}

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

React Select 映射问题

React Select mapping issue

javascript

reactjs

react-select