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

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 ...

我的意思是这种类型的函数可以与 state 中的嵌套对象一起使用<input/> name art吗？

Answer 1

是的，您可以通过在 setState 中使用展开运算符来做到这一点。

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

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

this.setState({
  salary: Object.assign({}, this.state.salary, {min: newMinValue})
});