用户将被带到 MailChimp 页面，并要求在 react js 中的 MailChimp 页面上再次填写订阅表格

Question

实际上，我的表单中有 2 个字段，名称和电子邮件，当用户点击提交按钮时，此数据应存储到 mailchimp 中。但发生的事情是，当我点击提交按钮时，它会将我重定向到 mailchimp 页面并要求再填写一份表格，我可以订阅。所以我不希望用户在 mailchimp 页面上再填写一张表格。

下面是我的代码

import React, { Component } from 'react'

import './FormJoinWaitlist.css'
class FormJoinWaitlist extends Component {

    constructor(props){
        super(props);
        this.state={
            emailValue: '',
        fNameValue: '',
            showMessage:false
        }
    }

    handleChange=(e)=>{
        this.setState({
            [e.target.name]:e.target.value
        });
        
    }

    


    render() {
        return (
            <div className="model" onClick={this.handleCloseForm}>
            <div className="JoinWaitList-model">
                <div className="JoinWaitList-content">
                  
                    <form className="JoinWaitList-form" action="https://walkingonearth.us#.list-manage.com/subscribe/post" method="POST">
                        <input type="hidden" name="u" value="####################"/>
                        <input type="hidden" name="id" value="##########"/>
                        <h1>Join the waitlist to get early access to our app</h1>
                        <div className="JoinWaitList-form-validation">
                            <div className="formInput">
                                <label htmlFor="">Full name</label>
                                <input type="text" className="modal-input" id="FullName" name="fNameValue" onChange={this.handleChange} placeholder="Enter your name" title="Full Name should be in letters only" required/>
                            </div>
                               <div className="formInput">
                                  <label htmlFor="">Email address</label>
                                  <input type="email" className="modal-input" id="Email" name="emailValue" onChange={this.handleChange} placeholder="Enter your email address" required/>
                               </div>
                            
                            
                         <button type="submit" className="JoinWaitList-model-input-optipn" id="mc-embedded-subscribe">Submit</button>
                     </div>
                     {/* <!-- people should not fill these in and expect good things --> */}
                    {/* <div class="field-shift" aria-label="Please leave the following three fields empty">
                        <label for="b_name">Name: </label>
                        <input type="text" name="b_name" tabindex="-1" value="" placeholder="Freddie" id="b_name"/>

                        <label for="b_email">Email: </label>
                        <input type="email" name="b_email" tabindex="-1" value="" placeholder="youremail@gmail.com" id="b_email"/>

                        <label for="b_comment">Comment: </label>
                        <textarea name="b_comment" tabindex="-1" placeholder="Please comment" id="b_comment"></textarea>
                    </div> */}
                    </form>
                    {this.state.showMessage && <h5>Thank you for sign up!</h5>}
                </div>
            </div>
         
            </div>
        )
    }
}
export default FormJoinWaitlist

Answer 1

那是因为您的表单具有 URL 的作用，它会将您带到该 URL。您需要研究 Mailchimp 拥有的任何 API，以便能够将这些数据推送到他们的服务器。您必须实现一个将道具从表单推送到 API 帖子的操作。

这是 Mailchimp 的 API 的链接 - https://mailchimp.com/developer/

                   <form .. ***** THIS IS YOUR PROBLEM --> ***** action="https://walkingonearth.us#.list-manage.com/subscribe/post" method="POST">
                        <input type="hidden" name="u" value="####################"/>
                        <input type="hidden" name="id" value="##########"/>
                        <h1>Join the waitlist to get early access to our app</h1>
                        <div className="JoinWaitList-form-validation">
                            <div className="formInput">
                                <label htmlFor="">Full name</label>
                                <input type="text" className="modal-input" id="FullName" name="fNameValue" onChange={this.handleChange} placeholder="Enter your name" title="Full Name should be in letters only" required/>
                            </div>
                               <div className="formInput">
                                  <label htmlFor="">Email address</label>
                                  <input type="email" className="modal-input" id="Email" name="emailValue" onChange={this.handleChange} placeholder="Enter your email address" required/>
                               </div>
                            
                            
                         <button type="submit" className="JoinWaitList-model-input-optipn" id="mc-embedded-subscribe">Submit</button>