我有一个 React 应用程序，我想将 mailchimp 注册表单添加到其中。我正在构建一个自定义注册表单，并让用户通过输入他们的名字和姓氏以及电子邮件进行注册。我不处理任何竞选事件。我想要实现的是，一旦他们注册，他们就会收到一封确认订阅的电子邮件。

我已经完成了 mailchimp 指南中的内容 http://kb.mailchimp.com/lists/signup-forms/host-your-own-signup-forms但它总是给我错误 500。

这是发送事件的代码

subscribe(event) {
  event.preventDefault();
  axios({
    url: 'https://xxxxxx.us15.list-manage.com/subscribe/post',
    method: 'post',
    data: this.state,
    dataType: 'json'
  })
  .then(() => {
    console.log('success');
  });
}

这是表格

<form onSubmit={this.subscribe.bind(this)}>
  <input type="hidden" name="u" value="xxxxxxxxxxx" />
  <input type="hidden" name="id" value="xxxxxxxxxxx" />

  <label>First Name</label>
  <input name="FNAME" type="text" onChange={this.handler.bind(this, 'FNAME')} required="true"/>

  <label>Last Name</label>
  <input name="LNAME" type="text" onChange={this.handler.bind(this, 'LNAME')} required="true"/>

  <label>Email</label>
  <input name="EMAIL" type="email" onChange={this.handler.bind(this, 'EMAIL')} required="true"/>
  <button type="submit" name="submit">Subscribe</button>
</form>

我也尝试过此链接中的建议 AJAX Mailchimp signup form integration

基本上将 u 和 id 与 url 一起传递，而不是在表单中输入。但这也不起作用。

有人知道如何使这项工作成功吗？谢谢!!

最佳答案

这是可能的。 [1]

正如您在 link 中提到的那样, MailChimp 允许您在我们的客户端上发布表单元素的值，以订阅人们到您的邮件列表。任何比这更高级的东西，你都需要使用他们的 API，因此需要 CORS(即客户端不能使用 API)。

如果您不使用 React – 您可以简单地复制/粘贴 MailChimp 的嵌入式表单生成器。但是，如果您使用的是 React，那么您可以执行以下操作:

1) 获取u和 id值(value)

这在上面的链接中有概述。或者，您可以进入表单生成器并找到操作字段:它类似于 https://cool.us16.list-manage.com/subscribe/post?u=eb05e4f830c2a04be30171b01&id=8281a64779。其中 u和 id在查询参数中。

2) 添加onChange和 value表单元素的属性

如果您只有一些简单的表单元素，您会发现键入没有任何作用。键入不会在输入元素内呈现任何文本。阅读https://reactjs.org/docs/forms.html明白为什么。 (React 需要单一的状态真实来源)。

值需要更新。您可以通过在绑定(bind)的函数中更新状态来完成此操作。

<input 
  value={this.state.emailValue} 
  onChange={ (e)=>{this.setState({emailValue: e.target.value});} } 
/> 

3) 奖励:包括 MailChimp 的反垃圾邮件字段

如果您阅读嵌入表单中的代码，您会注意到以下内容:

<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_eb05e4f830c2a04be30171b01_8281a64779" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

您可以通过更改 Babel 和 JSX 的适当字段将它们包含在 React 中。 class需要是 className . <input>标签需要关闭，样式需要作为对象传递。

总而言之:这是一个完整的组件

import React from 'react'

class SubscribePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        emailValue: '',
        fNameValue: '',
        lNameValue: '',
    };
  }

    render() {
        return (
                <form action="https://cool.us16.list-manage.com/subscribe/post" method="POST" noValidate>
                  <input type="hidden" name="u" value="eb05e4f830c2a04be30171b01"/>
                <input type="hidden" name="id" value="8281a64779"/>
                <label htmlFor='MERGE0'>
                    Email
                    <input 
                        type="email" 
                        name="EMAIL" 
                        id="MERGE0"
                        value={this.state.emailValue} 
                        onChange={ (e)=>{this.setState({emailValue: e.target.value});} } 
                        autoCapitalize="off" 
                        autoCorrect="off"
                     /> 
                </label>
                <label htmlFor='MERGE1'>
                    First name
                    <input 
                        type="text" 
                        name="FNAME" 
                        id="MERGE1" 
                        value={this.state.fNameValue} 
                        onChange={(e)=>{this.setState({fNameValue: e.target.value});}}
                    />
                </label>
                <label htmlFor='MERGE2'>
                    Last name
                    <input 
                        type="text" 
                        name="LNAME" 
                        id="MERGE2" 
                        value={this.state.lNameValue} 
                        onChange={(e)=>{this.setState({lNameValue: e.target.value});}}
                    />
                </label>
                  <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" className="button"/>

                <div style={{position: 'absolute', left: '-5000px'}} aria-hidden='true' aria-label="Please leave the following three fields empty">
                    <label htmlFor="b_name">Name: </label>
                    <input type="text" name="b_name" tabIndex="-1" value="" placeholder="Freddie" id="b_name"/>

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

                    <label htmlFor="b_comment">Comment: </label>
                    <textarea name="b_comment" tabIndex="-1" placeholder="Please comment" id="b_comment"></textarea>
                </div>
              </form>
        )
    }
}

export default SubscribePage

[1]:请注意，用户将被带到 MailChimp 页面，并被要求通过单击其电子邮件中的链接来验证订阅。为避免这种情况，您必须使用 API

关于javascript - React 中的自定义 mailchimp 注册表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44341293/