我正在尝试重构代码库,但我陷入了困境。我基本上是尝试根据选择框的 onChange
事件更新状态。
在本例中,handleFilterChange
函数中的 searchCriteria
参数是 ingredients
。
但假设我有另一个选择框,其中包含anotherIngredients
的选项。我无法根据变量传播 prevState
。
我必须输入...prevState.ingredients
有正确的方法吗?
所以我的组件状态是:
state = {
ingredients: {
name: "",
operation: "",
value: ""
},
anotherIngredients: {
name: "",
operation: "",
value: ""
}
};
我的处理程序是:
handleFilterChange = (event, searchCriteria, searchCriteriaKey) => {
let newValue = event.target.value;
this.setState(prevState => ({
[searchCriteria]: {
...prevState.ingredients,
[searchCriteriaKey]: newValue
}
}));
};
我的选择框组件是:
<Select
value={ingredients.name}
options={[
{ key: "", value: "Please choose an ingredient" },
{ key: "ingredient1", value: "INGREDIENT 1" },
{ key: "ingredient2", value: "INGREDIENT 2" },
{ key: "ingredient3", value: "INGREDIENT 3" },
{ key: "ingredient4", value: "INGREDIENT 4" }
]}
changeHandler={event =>
this.handleFilterChange(event, "ingredients", "name")
}
/>
希望我能解释一下自己。谢谢!
最佳答案
您应该重用变量 searchCriteria
从状态中提取以前的值。
handleFilterChange = (event, searchCriteria, searchCriteriaKey) => {
let newValue = event.target.value;
this.setState(prevState => ({
[searchCriteria]: {
...prevState[searchCriteria],
[searchCriteriaKey]: newValue
}
}));
};
关于javascript - 用变量传播 prevState,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60522000/