Javascript 使用setState使用输入值更新处于本地状态的对象项的值

用对象项的上一个值更新（连接）输入值的正确方法是什么

考虑以下示例：

地方州

this.state = { model: 'ggg'}

this.state = {values: { 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)}/>
)
    };

我试着

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)}/>

handleChange=（事件）=>{
this.setState（prevState=>({
价值观：{
…国家价值观，
[event.target.name]：event.target.value
},
}))}
this.handleChange（evt）}/>

输出：“ggga”、“gggq”

这并没有给我预期的输出。 有人能提出一个解决方案吗

---

谢谢

您不需要通过

…prevState

或

…this.state

，您只需使用

this.setState({
    myProp: newValue
})

关于您要询问的内容（如何连接字符），请使用onKeyDown/onKeyUp事件仅获取您按下的字符，并将其连接到如下状态：

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

.
.
.
.

function handleKeyDown(evt){
    evt.preventDefault();
    this.setState({
        myProp: this.state.myProp + evt.target.value
    })
}

this.handleChange（evt）}
onKeyDown={evt=>this.handleKeyDown（evt）}
/>
.
.
.
.
功能handleKeyDown（evt）{
evt.preventDefault（）；
这是我的国家({
myProp:this.state.myProp+evt.target.value
})
}

您不需要通过

…prevState

或

…this.state

，您只需使用

this.setState({
    myProp: newValue
})

关于您要询问的内容（如何连接字符），请使用onKeyDown/onKeyUp事件仅获取您按下的字符，并将其连接到如下状态：

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

.
.
.
.

function handleKeyDown(evt){
    evt.preventDefault();
    this.setState({
        myProp: this.state.myProp + evt.target.value
    })
}

this.handleChange（evt）}
onKeyDown={evt=>this.handleKeyDown（evt）}
/>
.
.
.
.
功能handleKeyDown（evt）{
evt.preventDefault（）；
这是我的国家({
myProp:this.state.myProp+evt.target.value
})
}

如果您所在的州

{
值：{
型号：“ggg”
}
}

，并且您在值中有多个属性（仅限于

模型

），并且您只想更新

模型

，我建议您这样做：

this.setState({
价值观：{
…这个州的价值观，
模型：event.target.value，
} 
});

如果您的状态中有其他属性，这也可以使用。作为@corrado4eyes，您不需要通过上一个状态。

如果您的状态为

{
值：{
型号：“ggg”
}
}

，并且您在值中有多个属性（仅限于

模型

），并且您只想更新

模型

，我建议您这样做：

this.setState({
价值观：{
…这个州的价值观，
模型：event.target.value，
} 
});

---

如果您的状态中有其他属性，这也可以使用。作为@corrado4eyes，您不需要通过上一个状态。

在我的渲染方法中，您在哪里使用TextField from。我更新了这个问题，我的意思是，TextField是自定义组件还是来自库。你在哪里使用TextField from？在我的渲染方法中。我更新了这个问题，我的意思是，TextField是一个自定义组件还是来自一个库。我没有在下面用钥匙。你有什么建议可以把我的第一个例子更新到第二个（更新到一个对象）。我想你已经回答了我的问题，再次询问你是否有疑问。你看到的第一个例子中，它运行良好。我没有在下面用钥匙。你有什么建议可以把我的第一个例子更新到第二个（更新到一个对象）。我想我已经回答了，如果你有疑问，再问一次