根据用户输入handleChange更改嵌套对象props的状态

Question

我有这个组件状态

this.state = {
      title: "",
      salary: {
        min: "",
        max: "",
        single: ""
      }
}

我使用此功能处理用户输入

handleInputChange = (e) => {
    this.setState({[e.target.name]:e.target.value});
}

适用于

<input type="text" id="title" name="title" onChange={this.handleInputChange}/>

我可以使用这样的功能来改变this.state.salary.min / max ...

我的意思是这种类型的函数可以在状态和<input/> name art中使用嵌套对象吗？

Answer 1

是的，您可以通过在setState中使用spread运算符来实现。

NSNumbers

或者，如果您使用的是ES5，则可以使用Object.assign（）。

this.setState(prevState => ({
    ...prevState,
    salary: {
        ...prevState.salary,
        min: newMinValue
    }
}))

Answer 2

是的，你可以，但你需要更新整个嵌套对象。

您有几种选择：

Object.assign（）

const salary = Object.assign({}, this.state.salary, { min: minValue });

this.setState({ salary });

传播运营商

const salary =  {
    ...this.state.salary,
    min: minValue
}

this.setState({ salary });

不可变数据结构

Immutable.js

this.state = {
    salary = Immutable.Map({ 
        min: 8,
        max: 10
    });
};

const salary = this.state.salary.set('min', minValue);

this.setState({ salary });

不变性助手

请参阅https://reactjs.org/docs/update.html

const salary = update(this.state.salary, {
    min: minValue
});

this.setState({ salary });