Reactjs React setState未设置输入字段的状态

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

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

---

这会导致相同的行为。我遗漏了什么？

因此，您正在错误地更新新状态。 您应该在表单属性中嵌套名称

---

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

您可以尝试将输入值绑定到

this.state.form.name

而不是像这样：

问题 您未正确设置状态。您的状态形状将

name

作为

state.form

的属性，因此

setState

需要与此形状匹配

解决方案 在

表单

对象中嵌套

[e.target.name]：e.target.value

。确保同时复制任何现有表单状态。React

setState

将浅合并根对象，但不会对嵌套状态更新进行深度合并

由于react状态更新是异步的，并且（当前在react 16.x中）react合成事件通常很快被置零并返回到事件池，因此在将状态更新排入队列之前，您可能还希望保存事件

name

和

value

属性

handleChange = (e) => {
  const { name, value } = e.target;
  this.setState((prevState) => ({
    form: {
      ...prevState.form,
      [name]: value
    },
    message: "event value: " + value
  }));
};

handleChange = (e) => {
  const { name, value } = e.target;
  this.setState((prevState) => ({
    form: {
      ...prevState.form,
      [name]: value
    },
    message: "event value: " + value
  }));
};