Formik 表单未从模态组件提交

Question

在普通页面和模态页面上有一些表单字段，我希望模态按钮触发提交事件。每当我在模态按钮上使用提交类型=“提交”时，我都没有得到回应。但是，如果我在“普通”页面按钮中使用它，它就可以工作。请问这是怎么回事，我不能在模态中使用它吗？

  <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>

Answer 1

我不太明白你到底想要什么，但如果你想触发提交，你可以用你的普通按钮来做。

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

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

然后在您的按钮上，删除类型提交并在单击时添加事件处理程序

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

对不起，我不知道 100% 哪个会起作用，我已经有一段时间没有使用 React an formik了。

但是请记住，当某些事情无法按照您的意愿运行时，请尝试另一种方式来实现它。通常使用事件处理程序手动触发提交