时间戳

首页 > 解决方案 > 在 React 中表单提交消息

reactjs - 在 React 中表单提交消息

问题描述

我正在尝试显示“您现在订阅了 {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] 说出时事通讯的名称？

标签： reactjspopupsubmitalertform-submit

解决方案

这不是 React 问题。

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

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

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

以及如何让 [object Object] 说出时事通讯的名称？

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

不幸的是，当我这样做时收到一个错误。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 + ".")
}

推荐阅读