reactjs - 反应 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

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

handleChange: 名称 = testg

并且 P 标签更改为具有以下文本：

事件值：testg 名称：test

无论我做什么，输入框的值都不会改变它保持不变。正如我的代码中所评论的，我还尝试直接在名称上设置状态，而不是使用事件名称，但这不起作用。我还尝试了以下方法：

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

这导致相同的行为。我错过了什么？

标签： reactjssetstate

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

问题描述

解决方案

推荐阅读