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

您不需要通过...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
    })
}

Answer 2

如果您的状态是

{
    values: { 
        model: 'ggg'
    }
}

，并且您在值中具有几个属性（更多的是model），而您只想更新model，我建议您这样做：

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

如果您的状态中还有其他属性，这也可以使用。作为@ corrado4eyes，您不需要传递以前的状态。

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

2 个答案: