我在我的项目中使用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 });
}
如何调整它以仅更改我希望更改的选项？
谢谢
您对所有选择的组件使用相同的更改处理程序，然后为所有选择的组件设置相同的状态值。为了解决这个问题，要么你需要将你的选择组件与处理它们自己的状态和更改事件的容器组件分开，要么你需要给每个选择组件一个唯一的状态值。
例子
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;
});
}
不要将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})
}
您所做的是使用单个变量来保存选择框的值。因此，如果有人更改，它将反映所有选择框
尝试将对象克隆到一个新对象，或者如果这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];
}
}
}
}