javascript - 表单提交事件未向函数提交值

Question

我在模态中编写了一个表单，在提交时应该调用一个函数并将值传递给函数以进行进一步处理。

代码如下所示：

    function sendEmail(e) {
      e.preventDefault();
    
      emailjs
        .sendForm(
          "Gmail",
          "template_b2lt88n",
          e.target,
          "user_k3ayAhuF6Lg5FZ4Ah1Ysx"
        )
        .then(
          (result) => {
            console.log(result.text);
          },
          (error) => {
            console.log(error.text);
          }
        );
      e.target.reset();
      alert("Form Submitted!");
    }
    
    const Popform = (props) => {
      return (
        <Modal
          {...props}
          size="lg"
          aria-labelledby="contained-modal-title-vcenter"
          centered
        >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-vcenter">
              Place Order
            </Modal.Title>
          </Modal.Header>
    
          <Modal.body>
            <FormData>
              <Form onSubmit={sendEmail} id="search_form">
                <FormInput
                  type="text"
                  name="subject"
                  placeholder="subject"
                  required
                />
                <FormInput type="text" name="name" placeholder="name" required />
                <FormInput
                  type="email"
                  name="email"
                  placeholder="email address"
                  required
                />
                <FormInput type="tel" name="number" placeholder="phone" required />
                <TextArea
                  rows="3"
                  name="idea"
                  placeholder="Your idea"
                  required
                ></TextArea>
                <Button
                  type="submit"
                  value="Send"
                >
                  SUBMIT
                </Button>
              </Form>
            </FormData>
          </Modal.body>
    
          <Modal.Footer>
            <Button onClick={props.onHide}>Close</Button>
          </Modal.Footer>
        </Modal>
      );
    };
    
    export default Popform;

问题是提交时没有调用该函数。我认为提交按钮本身不起作用。

但是，如果我在模式之外使用相同的表单代码和函数，它工作正常。

标签： javascriptreactjsformsmodal-dialog