Question

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

Answer 1

因为忘记在break案例中的setState之后使用switch。有关switch。

的详细信息，请查看 MDN Doc

像这样写：

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设置多个状态属性

1 个答案: