Question

我在我的项目中使用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 });
}

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

由于

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

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

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

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

React Select映射问题

3 个答案: