Javascript React input SETING state onChange设置多个状态属性

我有一组输入，我想将它们与组件状态的各自属性联系起来（因为应用程序中没有其他组件依赖于这些输入的值，所以我不想将它们存储在Redux中。）

我已经编写了一个函数，它接受输入事件的值和输入的类型，并且应该更新组件状态中的相关属性

然而，当我记录状态时，我可以看到多个值被同一个输入更新

有人能看出我犯了什么错误吗

searchInput = (typeOfFilter, placeholder) => {
    return (
        <input
            className=""
            type="text"
            placeholder={placeholder}
            onChange={e => {
                this.updateInputValue(e, typeOfFilter);
                this.filterPlots(this.props);
            }}
        />
    );
};

updateInputValue = (evt, typeOfFilter) => {
    switch (typeOfFilter) {
        case 'nextStageFilterString':
            this.setState({ nextStageFilterString: evt.target.value });
        case 'blockNameFilterString':
            this.setState({ blockNameFilterString: evt.target.value });
        case 'growerNameFilterString':
            this.setState({ growerNameFilterString: evt.target.value });
        case 'varietyFilterString':
            this.setState({ varietyFilterString: evt.target.value });
        case 'regionFilterString':
            this.setState({ regionFilterString: evt.target.value });
        case 'ripenessFilterString':
            this.setState({ ripenessFilterString: evt.target.value });
    }
};

searchInput=（类型过滤器，占位符）=>{
返回(
{
此.updateInputValue（e，过滤器类型）；
this.filterPlots（this.props）；
}}
/>
);
};
updateInputValue=（evt，类型过滤器）=>{
开关（过滤器类型）{
案例“nextStageFilterString”：
this.setState（{nextStageFilterString:evt.target.value}）；
案例“blockNameFilterString”：
this.setState（{blockNameFilterString:evt.target.value}）；
案例“growerNameFilterString”：
this.setState（{growerNameFilterString:evt.target.value}）；
案例“varietyFilterString”：
this.setState（{varietyFilterString:evt.target.value}）；
案例“regionFilterString”：
this.setState（{regionFilterString:evt.target.value}）；
案例“成熟过滤器串”：
this.setState（{ripensFilterString:evt.target.value}）；
}
};

因为在设置了

开关内的状态后，您忘记了使用
中断
。有关
开关的详细信息，请查看

这样写：

updateInputValue = (evt, typeOfFilter) => {
    switch (typeOfFilter) {
        case 'nextStageFilterString':
            this.setState({ nextStageFilterString: evt.target.value });
            break;
        case 'blockNameFilterString':
            this.setState({ blockNameFilterString: evt.target.value });
            break;
        case 'growerNameFilterString':
            this.setState({ growerNameFilterString: evt.target.value });
            break;
        case 'varietyFilterString':
            this.setState({ varietyFilterString: evt.target.value });
            break;
        case 'regionFilterString':
            this.setState({ regionFilterString: evt.target.value });
            break;
        case 'ripenessFilterString':
            this.setState({ ripenessFilterString: evt.target.value });
            break;
    }
};

updateInputValue = (evt, typeOfFilter) => {
    this.setState({
        [typeOfFilter]: evt.target.value
    })
}

但是更新特定的state属性不需要这么大的代码，因为您已经将属性名称传递给
updateInputValue
函数

只需这样写：

updateInputValue = (evt, typeOfFilter) => {
    switch (typeOfFilter) {
        case 'nextStageFilterString':
            this.setState({ nextStageFilterString: evt.target.value });
            break;
        case 'blockNameFilterString':
            this.setState({ blockNameFilterString: evt.target.value });
            break;
        case 'growerNameFilterString':
            this.setState({ growerNameFilterString: evt.target.value });
            break;
        case 'varietyFilterString':
            this.setState({ varietyFilterString: evt.target.value });
            break;
        case 'regionFilterString':
            this.setState({ regionFilterString: evt.target.value });
            break;
        case 'ripenessFilterString':
            this.setState({ ripenessFilterString: evt.target.value });
            break;
    }
};

updateInputValue = (evt, typeOfFilter) => {
    this.setState({
        [typeOfFilter]: evt.target.value
    })
}

看哪，它起作用了！我没有想到用括号表示setState；我想这就像说state[类型过滤器]。谢谢是的，setState基本上是一个函数，我们需要传递一个带有要更新的键和值的对象，这样我们就可以使用setState中的所有js魔法：）