作出反应的问题

我在我的项目中使用react-select选择映射和我使用它map像内：作出反应的问题

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

它正确地显示所有我对自己所有项目的选项，但现在我不能摆脱有关select ...

基本上当我选择单个项目的选项，该选项正在改变所有项目...

这是我做过什么至今：

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

我该如何调整它才能更改仅用于我想更改的选项？

感谢

来源

2017-09-28 Ayeye Brazo

它改变所有，因为它们都依赖于单个变量。 –

没关系......但我该如何解决？ –

使每个人都依赖于不同的变量 –

您使用的是相同的更改处理您的所有选择组件，然后为你的所有选择的组件相同的状态值。要处理这个问题，你需要将你选择的组件与处理它们自己的状态和改变事件的容器组件分开，或者你需要给每个选择组件一个唯一的状态值。

例

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

来源

2017-09-28 11:14:26 bennygenel

谢谢，非常有用。它按预期工作。 –

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

来源

2017-09-28 11:17:00 AdowTatep

取而代之制作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}) 
}

你在做什么是使用一个变量来保存选择框的值。所以如果有人改变，它会反映所有的选择框

来源

2017-09-28 11:28:33

作出反应的问题

回答

相关问题