第一页加载时未显示表单输入

Question

缺少表单输入

我的表单输入未在第一页加载时显示！当我转到另一个页面时，一切都解决了。这只是 netlify 的一个问题，当我部署在浪涌上时，问题就消失了（问题在开发或与 gatsby 服务捆绑时也不明显）。

我很确定这是因为 netlify 添加了独特的代码来使表单工作，不知道这是不是问题...

这是 2 次部署：

[x] 网络化：https://vigilant-torvalds-72b098.netlify.com/

[x] 激增：http://hallowed-sand.surge.sh/

我尝试更改表单名称，但无济于事。

这个问题有解决办法吗？

这是我的代码

此确切代码适用于我的其他多页表单（请参阅网站）。当我访问网站上的另一个页面时，一切正常。

import Grid from "@material-ui/core/Grid"
import { FaMapMarkerAlt, FaTruck } from "react-icons/fa"
import { Link } from "gatsby"
import { navigateTo } from "gatsby-link"

// Styles
import "./footer.scss"
import "../elements/subscribeForm.scss"

// Images
import nglogo from "../images/ng-logo.png"

// Form Helpers
function encode(data) {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
    .join("&")
}

export default class footer extends Component {
  state = {
    footerEmail: "",
    type: "email"
  }

  handleChange = e => {
    this.setState({
      footerEmail: e.target.value,
    })
  }

  handleSubmit = e => {
    e.preventDefault()
    const form = e.target
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({
        "form-name": "subscribeFormFooter",
        ...this.state,
      }),
    })
      .then(() => navigateTo(form.getAttribute("action")))
      .catch(error => alert(error))
  }

  render() {
    return (
      <footer className="footer">
        <Grid container className="footer__item" spacing={32}>
          <Grid item xs={12} sm={12} md={5} lg={5} className="footer__item1">
            <h1>Be Future Ready</h1>
            <p>
              Our dedication to innovation and efficiency helps us provide our
              customers with long-term savings. <br />
              Subscribe to our newsletter to receive timely updates on products,
              services and global developments.
            </p>
            <form
              name="subscribeFormFooter"
              method="post"
              action="thankyou/"
              data-netlify="true"
              onSubmit={this.handleSubmit}
              className="subscribe__input"
            >
              <input
                type={this.state.type}
                name="footerEmail"
                placeholder="Email Address"
                onChange={this.handleChange}
                value={this.state.footerEmail}
              />
              <button
                type="submit"
                disabled={!this.state.footerEmail}
                style={
                  !this.state.footerEmail
                    ? { backgroundColor: "#c8d6e5", cursor: "default" }
                    : {}
                }
              >
                Subscribe
              </button>
            </form>
          </Grid>
          <Grid item xs={12} sm={12} md={2} lg={2} className="footer__item2">
            <h2>Sitemap</h2>
            <ul>
              <Link to="/projects">
                <li>Projects</li>
              </Link>
              <Link to="/downloads">
                <li>Downloads</li>
              </Link>
              <Link to="quote">
                <li>Quote</li>
              </Link>
            </ul>
          </Grid>
          <Grid item xs={12} sm={12} md={2} lg={2} className="footer__item3">
            <h2>Connect</h2>
            <ul>
              <a href="https://www.facebook.com/gundapowerpvt/" target="blank">
                <li>Facebook</li>
              </a>
              <a
                href="https://www.linkedin.com/company/14446246/"
                target="blank"
              >
                <li>LinkedIn</li>
              </a>
              <a href="mailto:info@gundapower.com" target="_top blank">
                <li>Email</li>
              </a>
            </ul>
          </Grid>
          <Grid item xs={12} sm={12} md={3} lg={3} className="footer__item4">
            <h2>Contact</h2>
            <h5>
              <FaMapMarkerAlt /> Administrative Office
            </h5>
            <p>123/10 Pannipitiya Road Battaramulla, Sri Lanka</p>
            <h5>
              <FaTruck /> Warehouse Location
            </h5>
            <p>184, Buthgamuwa Road Rajagiriya, Sri Lanka</p>
          </Grid>
        </Grid>
        <Grid container>
          <Grid
            item
            xs={12}
            sm={12}
            md={12}
            lg={12}
            className="footer__copyright"
          >
            © Copyright {new Date().getFullYear()} Gunda Power. All Rights
            Reserved.
            <a href="https://www.stem.lk" target="blank">
              Designed by Stem.lk
              <img className="footer__nglogo" src={nglogo} alt="nugoo" />
            </a>
          </Grid>
        </Grid>
      </footer>
    )
  }
}

输入应该会显示，但实际上没有。在开发、捆绑和浪涌部署方面工作良好。所以我认为这与netlify的表单处理男孩有关。任何想法将不胜感激。

Answer 1

添加标签解决了这个问题！

天哪。

<label htmlFor="newsletterEmail" style={{ display: "none" }}>
                  Email
                </label>
                <input
                  type="email"
                  name="newsletterEmail"
                  placeholder="Email Address"
                  onChange={this.handleChange}
                  value={this.state.newsletterEmail}
                />