React 中的表单提交消息

Question

我正在尝试显示一条消息“您现在已订阅{SUBSCRIPTION}”。当用户在 React 中提交表单时。我是 React 的新手，所以我觉得我遗漏了一些小东西（希望如此）。

到目前为止，我有如下内容：

constructor(props) {
        super(props);

        this.state = {
            user: {
                newsletter: props.newsletter
            }
        }
    }

    handleNewsletterInput(event) {
        var user = this.state.user;

        user.newsletter = event.target.value;

        // Update the state object
        this.setState({ user: user })
    }

    handleSubmit(event) {
        var user = this.state.user;

        user.newsletter = event.target.value;

        alert("You are now subscribed to " + { user } + ".")
    }

    ...

    render() {
        return (
            <div>
                <h2>Subscribe</h2>
                <form onSubmit={this.handleSubmit.bind(this)}>
                    <label>
                        <p>Newsletter Type:</p>
                        <input
                            id='newsletter'
                            type='text'
                            name='newsletter'
                            value={this.state.user.newsletter}
                            onChange={this.handleNewsletterInput.bind(this)}
                        />
                    </label>
                    <button
                        type='submit'
                        id='subscribe'
                        name='subscribe'>
                        Subscribe
                    </button>
                </form>
            </div>
        );

     ...

当我运行它时，我收到一条消息说“您现在订阅了 [object Object]”。我做错了什么，我怎样才能让 [object Object] 说出时事通讯的名称？

Answer 1

这不是 React 问题。

alert("You are now subscribed to " + { user } + ".")

此处您将一个对象与一个字符串连接起来。该对象被强制转换为“[object Object]”字符串，因为任何对象 v.toString() 默认情况下（除非明确设置）都将此作为其内存引用。试试这一行：

alert("You are now subscribed to " + JSON.stringify(user) + ".")

and how can I get [object Object] to say the name of the newsletter?

alert("You are now subscribed to " + user.newsletter + ".")

Unfortunately, I receive an error when I do that. alert("You are now subscribed to " + { user.newsletter } + ".")

你在下面问题的评论中提到的这个语法是错误的。 {user.newsletter} 语法不正确，它既不是对象也不是字符串。

编辑 handleNewsletterInput 后添加：

handleNewsletterInput(event) {
        var user = this.state.user;

        user.newsletter = event.target.value;

        // Update the state object
        this.setState({ user: user })
}

上面不会更新状态，因为你没有改变user变量的内存引用。 React 不会知道状态已经改变，因为它会比较 prevState===currentState 并且它会给出 true，因为它在相同的内存位置。试试这个：

handleNewsletterInput(event) {
        const { user } = this.state;

        const updatedUser = {
            ...user,
            newsletter: event.target.value
        }

        // Update the state object
        this.setState({ user: updatedUser })
}

编辑 2：你这里也犯了一个错误-

handleSubmit(event) {
        var user = this.state.user;

        user.newsletter = event.target.value;

        alert("You are now subscribed to " + { user } + ".")
}

这个事件是提交事件，这里不需要前两行。

handleSubmit(event) {
        // Do something like send form data to backend here.

        alert("You are now subscribed to " + this.state.user.newsletter + ".")
}

React 中的表单提交消息

Form Submit Message in React

reactjs

popup

submit

alert

form-submit