Javascript 如何将mailerlite.com注册表单与React集成？

Mailerlite.com允许您在站点中嵌入电子邮件注册表单-您如何将其与React集成

---

具体来说，如何集成JavaScript代码？

下面是一个将HTML表单转换为React代码的示例-将所有出现的代码替换为示例表单中的相关代码（有几种不同的代码）。我无法显示加载图标，所以只添加了一些文本

<section id="signup" className="gradient-gray">
  <div id="mlb2-CODE" className="ml-subscribe-form ml-subscribe-form-CODE">
    <div className="ml-vertical-align-center">
      <div className="subscribe-form ml-block-success" style={{ display: 'none' }}>
        <div className="form-section">
          <p>Thank you, you have successfully subscribed to our announcement list!</p>
        </div>
      </div>
      <form
        className="ml-block-form"
        action="https://landing.mailerlite.com/webforms/submit/CODE"
        data-id="CODE"
        data-code="CODE"
        method="POST"
        target="_blank"
      >
        <p className="signup-title">
          Sign up for our announcement list and we'll let you know when we launch!
        </p>
        <div className="subscribe-form">
          <div className="form-section">
            <div
              className="form-group ml-field-email ml-validate-required ml-validate-email"
            >
              <input
                type="email"
                name="fields[email]"
                className="form-control signup-text"
                placeholder="Email address"
                autoComplete="email"
                spellCheck="false"
                autoCapitalize="off"
                autoCorrect="off"
              />
              <input type="hidden" name="ml-submit" value="1" />
              <button type="submit" className="primary signup-button">
                Subscribe
              </button>
              <button
                disabled
                style={{ display: 'none' }}
                type="button"
                className="loading"
              >
                Submitting...
                {/* <img
                  src="https://static.mailerlite.com/images/rolling@2x.gif"
                  alt="loading..."
                  width="20"
                  height="20"
                  style={{ width: '20px', height: '20px' }}
                /> */}
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

---

您可以调整它，使其不使用内联生成的函数来隐藏/显示表单部分

可以使用组件的状态管理显示

class Landing extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          display_form: true,
          display_success: false,
      };

  // add mailerlite code
  componentDidMount() {
    // success function
    const f = () => {
      this.setState({
        display_form: false,
        display_success: true,
      });
    };
    // register it on the window object
    window[`ml_webform_success_${CODE}`] = f;

    const script2 = document.createElement("script");
    script2.src = "https://static.mailerlite.com/js/w/webforms.min.js?CODE";
    document.body.appendChild(script2);
  }

  render() {
    return (...);
  }
}

并使用状态来显示或不显示零件，这更具反应性

问候,

class Landing extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          display_form: true,
          display_success: false,
      };

  // add mailerlite code
  componentDidMount() {
    // success function
    const f = () => {
      this.setState({
        display_form: false,
        display_success: true,
      });
    };
    // register it on the window object
    window[`ml_webform_success_${CODE}`] = f;

    const script2 = document.createElement("script");
    script2.src = "https://static.mailerlite.com/js/w/webforms.min.js?CODE";
    document.body.appendChild(script2);
  }

  render() {
    return (...);
  }
}