0

我正在尝试以 netlify 形式保存表单值。在 gatsby 中开发静态站点使用了功能组件，而对于我正在使用 boost strap modal 的表单。我正在尝试以 netlify 形式保存值。我已经添加了必填字段和标签来与 netlify 表单进行通信，我也尝试过使用普通的 html 表单。但我无法看到 netlify 表单下的表单值。任何人都可以指导我实现结果。我已经发布了下面的代码。提前致谢。

 function Home() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    linkedin: "",
    skillset: "",
    experience: "",
  })

  const [show, setShow] = useState(false)

  const handleShow = () => setShow(true)

  const handleChange = e => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    })
  }

  const handleClose = () => setShow(false)

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

  const handleonSubmit = e => {
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contact", ...formData }),
    })
      .then(() => alert("Success!"))
      .catch(error => alert(error))

    e.preventDefault()
  }

  return (
    <Layout>
      <div className={Styles.content}>
        <Container>
          <Row>
            <div>
              <div
                className="d-flex align-items-center justify-content-center"
                style={{ height: "100vh" }}
              >
                <Button variant="primary" onClick={handleShow}>
                  Launch Form modal
                </Button>
              </div>
              <Modal
                show={show}
                onHide={handleClose}
                style={{ float: "right" }}
                // onSubmit={handleSubmit}
              >
                <Modal.Header closeButton>
                  <Modal.Title>Details:</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                  <Form data-netlify="true" onSubmit={handleonSubmit}>
                    {/* <input type="hidden" name="contact" value="Form-Details" /> */}

                    <Form.Group controlId="formBasicName">
                      <Form.Label>Name</Form.Label>
                      <Form.Control
                        type="text"
                        name="name"
                        placeholder="Your Name"
                        value={formData.name}
                        onChange={handleChange}
                      />
                    </Form.Group>

                    <Form.Group controlId="formBasicEmail">
                      <Form.Label>Email address</Form.Label>
                      <Form.Control
                        type="email"
                        name="email"
                        placeholder="Enter email"
                        value={formData.email}
                        onChange={handleChange}
                      />
                    </Form.Group>
                     <Button type="submit">Submit</Button>
                      </Form>
                </Modal.Body>
              </Modal>
            </div>
               </Container>
      </div>
    </Layout>
4

0 回答 0