javascript - 根据用户输入 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

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

您有多种选择:

对象.assign()

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

this.setState({ salary });

展开运算符

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

this.setState({ salary });

不可变数据结构

不可变的.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 });