Javascript Formik表单未从Modal组件提交

如果在普通页面和模式页面上有一些表单字段，我希望模式按钮触发提交事件。每当我在模式按钮上使用submit type=“submit”时，都不会得到响应。但是如果我在正常的页面按钮中使用它，它就会工作。请问发生了什么事，我不能在模态中使用它吗

  <Formik
    initialValues={{
      productName: "",
      productNumber: "",
      quantity: 1,
      unitCost: 0,
      totalCost: 0,
      customerName: "",
      customerNumber: "",
      amount: "",
    }}
    onSubmit={(data, { setSubmitting }) => {
      setSubmitting(true);
      setTimeout(() => {
        console.log(data);
        alert(JSON.stringify(data, null, 2));
        setSubmitting(false);
      }, 2000);
    }}
  >
    {({
      values,
      handleBlur,
      handleChange,
      setFieldValue,
      isSubmitting,
    }) => (
      <Form>
        <Box>
          <Grid templateColumns="repeat(2, 1fr)" gap={5}>
            <Box>
              <FormLabel>Product Name:</FormLabel>
              <Field
                as={Input}
                name="productName"
                type="text"
                placeholder="Product Name:"
              />
            </Box>
            <Box>
              <FormLabel>Product Number:</FormLabel>
              <Field
                as={Input}
                name="productNumber"
                type="number"
                placeholder="Product Number:"
              />
            </Box>
            <Box>
              <FormLabel>Quantity:</FormLabel>
              <Field
                as={Input}
                name="quantity"
                type="number"
                value={values.quantity}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="Quantity:"
              />
            </Box>
            <Box>
              <FormLabel>Unit Cost:(in Naira)</FormLabel>
              <Field
                as={Input}
                name="unitCost"
                type="number"
                value={values.unitCost}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="Unit Cost:"
              />
            </Box>
            <Box>
              <FormLabel>Total Cost:(in Naira)</FormLabel>
              <CalculatedField
                type="number"
                name="totalCost"
                values={values}
                value={values.totalCost}
                setFieldValue={setFieldValue}
                onChange={handleChange}
                onBlur={handleBlur}
              />
            </Box>
          </Grid>

          <Button mt={4} colorScheme="green" onClick={openIt} isFullWidth >
            // If used here, it will work... but i don't want to use it here
            Order Now
          </Button>
        </Box>

        <Modal closeOnOverlayClick={true} isOpen={isOpen} onClose={onClose}>
          <ModalOverlay />
          <ModalContent>
            <ModalHeader>Modal Title</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
              <Box>
                <Grid templateColumns="repeat(2, 1fr)" gap={5}>
                  <Box>
                    <FormLabel>Customer Name: </FormLabel>
                    <Field
                      as={Input}
                      name="customerName"
                      type="text"
                      placeholder="Customer Name:"
                    />
                  </Box>

                  <Box>
                    <FormLabel>Customer Number: </FormLabel>
                    <Field
                      as={Input}
                      name="customerNumber"
                      type="text"
                      placeholder="Customer Number:"
                    />
                  </Box>

                  <Box>
                    <FormLabel>Amount: </FormLabel>
                    <Field
                      as={Input}
                      name="amount"
                      type="text"
                      placeholder="Amount:"
                    />
                  </Box>
                </Grid>
              </Box>
            </ModalBody>

            <ModalFooter>
              <Button colorScheme="green" type="submit" >
               // i want to use it here
                Pay Now
              </Button>
            </ModalFooter>
          </ModalContent>
        </Modal>
      </Form>
    )}
  </Formik>

{
设置提交（真）；
设置超时（（）=>{
控制台日志（数据）；
警报（JSON.stringify（数据，null，2））；
设置提交（假）；
}, 2000);
}}
>
{({
价值观
车把，
handleChange，
setFieldValue，
提交，
}) => (
产品名称：
产品编号：
数量：
单位成本：（奈拉）
总成本：（以奈拉为单位）
//如果在这里使用，它会工作…但我不想在这里使用它
现在点菜
情态标题
客户名称：
客户编号：
数量：
//我想在这里用
现在付款
)}

我不太明白您到底想要什么，但是如果您想触发提交，您可以使用普通按钮

首先，将submitForm或handleSubmit作为道具传递给其他人

 {({
     submitForm or handleSubmit,
      values,
      handleBlur,
      handleChange,
      setFieldValue,
      isSubmitting,
    }) => (

然后在butotn上，删除类型submit并单击添加事件处理程序

<Button colorScheme="green" onClick={submitForm // or handleSubmit}>
  Pay Now
</Button>

现在付款

我很抱歉，我不知道哪一个会100%的工作，这是一个很长的时间我没有使用反应蚁

---

但请记住，当某些事情不能像你所希望的那样工作时，试着用另一种方式来做。通常使用事件处理程序手动触发submit，该事件处理程序

；是的，它很有魅力！。。。手推车