javascript - 使用 setState 使用输入值更新本地状态中对象项的值

Question

将输入值与对象项的先前值更新(连接)的正确方法是什么？

考虑下面的例子:

本地州

this.state = { model: 'ggg'}

在处理程序中

handleChange = (event) => {
            this.setState({...this.state,
                [event.target.name]: event.target.value});
        };
render() {

        const {values} = this.state;
        return (
<TextField
        id="model"
        label="Model"
        name="model"
        value={this.state.model}
        onChange={evt => this.handleChange(evt)}/>
)
    };

这是在我输入字符并将模型更新为“ggga”“gggaaa”时更新模型。

但我现在想更新我的对象的状态。

本地州

this.state = {values: { model: 'ggg'}}

我尝试过，

handleChange = (event) => {
this.setState(prevState => ({
  values: {
    ...prevState.values,
    [event.target.name]: event.target.value
  },
}))}

<TextField
    id="model"
    label="Model"
    name="model"
    value={this.state.values.model}
    onChange={evt => this.handleChange(evt)}/>

输出:“ggga”，“gggq”

这没有给我预期的输出。 有人可以建议一个解决方案吗？

谢谢

Answer 1

如果您所在的州是

{
    values: { 
        model: 'ggg'
    }
}

，并且您的值中有多个属性(更多的是 model)，并且您只想更新 model，我建议您这样做:

this.setState({
    values: {
        ...this.state.values,
        model: event.target.value,
    } 
});

如果您所在州有其他属性，这也适用。作为@corrado4eyes，您不需要传递之前的状态。