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

Question

我有一组输入，我想将它们绑定到组件状态的各个属性（因为应用程序中没有其他组件依赖于这些输入的值，我不想将它们存储在还原。)

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

但是，当我记录状态时，我可以看到同一个输入正在更新多个值。

谁能看出我哪里出错了？

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

Answer 1

因为你忘记在 switch 案例中的 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
    })
}

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

React input setting state onChange sets multiple state properties

javascript

reactjs