React 输入设置状态 onChange 设置多个状态属性

Posted 2023-02-22

【中文标题】React 输入设置状态 onChange 设置多个状态属性

【英文标题】：React input setting state onChange sets multiple state properties

【发布时间】：2018-06-13 03:10:39

【问题描述】：

我有一组输入，我想将它们绑定到组件状态的各个属性（因为应用程序中没有其他组件将依赖于这些输入的值，我不想将它们存储在 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 );
    
;

【参考方案1】：

因为你忘了在switch case 内的setState 之后使用break。查看MDN Doc了解switch的详细信息。

这样写：

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 函数。

简单的写成这样：

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

【讨论】：

瞧，它有效！我没有想到对 setState 使用括号表示法；我想这就像说 state[typeOfFilter]。谢谢！

是的，setState 基本上是一个函数，我们需要传递一个带有我们想要更新的键和值的对象，所以我们可以使用 setState 中的所有 js 魔法:)