反应setState不设置输入字段的状态

Question

我正在使用盖茨比。这是我的代码：

import React from "react"

class ContactCard extends React.Component {
    constructor(props) {
        super(props);
        this.state = { form: { name: "test" }, message: ""};
        this.handleChange = this.handleChange.bind(this);
    }
    handleSubmit = e => {
        e.preventDefault();
    };

    handleChange = e => {
        console.log("handleChange: " + e.target.name + " = " + e.target.value);
        this.setState({ [e.target.name]: e.target.value, message: "event value: " + e.target.value });
        /*
        I also tried the following:
        this.setState({ name: e.target.value, message: "event value: " + e.target.value });
        */
    }

    render() {
        const { form: { name }, message } = this.state;
        return (
            <>
                <p>{message} name: {name} </p>
                <form onSubmit={this.handleSubmit}>
                    <input
                        type="text"
                        value={name}
                        name="name"
                        onChange={this.handleChange}
                    />
                </form>
            </>
        );
    }
}
export default ContactCard

当我在输入框中输入内容时，我会在控制台日志中看到以下内容：

handleChange：名称= testg

P标记更改为具有以下文本：

事件值：testg名称：test

无论我做什么，输入框的值都不会更改。如我的代码中所述，我还尝试直接在名称上设置setState而不是使用事件名称，但这没有用。我还尝试了以下方法：

handleChange = e => {
    console.log("handleChange: " + e.target.name + " = " + e.target.value);
    var newState = { [e.target.name]: e.target.value, message: "event value: " + e.target.value };
    this.setState(newState);
}

这将导致相同的行为。我想念什么？

Answer 1

因此，您错误地更新了新状态。 您应该在 form 属性内嵌套 name 。

从移动设备发送，请原谅我的格式。

Answer 2

您是否可以像这样将输入值绑定到this.state.form.name上？

<input
 type="text"
 value={this.state.form.name}
 name="name"
 onChange={this.handleChange}
/>

Answer 3

问题

您错误地设置了状态。您的州形状具有name作为state.form的属性，因此setState需要与该形状匹配。

解决方案

嵌套[e.target.name]: e.target.value对象中的form。确保您也浅复制任何现有的表单状态。 React setState将浅合并根对象，但不会深度嵌套嵌套状态更新。

由于反应状态更新是异步的，并且（当前在反应16.x 中）反应合成事件通常会快速无效并返回到事件池，因此您可能还想保存事件{{1 }}和name属性之前排入状态更新。

value