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>

Answer 1

我不太明白你到底想要什么，但如果你想触发提交，你可以使用普通按钮。首先，将submitForm或handleSubmit作为道具与其他的一起传递&nbsp;{({&nbsp; &nbsp; &nbsp;submitForm or handleSubmit,&nbsp; &nbsp; &nbsp; values,&nbsp; &nbsp; &nbsp; handleBlur,&nbsp; &nbsp; &nbsp; handleChange,&nbsp; &nbsp; &nbsp; setFieldValue,&nbsp; &nbsp; &nbsp; isSubmitting,&nbsp; &nbsp; }) => (然后在按钮上删除提交类型并添加单击事件处理程序<Button colorScheme="green" onClick={submitForm // or handleSubmit}>&nbsp; Pay Now</Button>抱歉，我不知道 100% 哪个会起作用，我已经有一段时间没有使用 React 和 formik 了。但请记住，当某些事情没有按照您想要的方式进行时，请尝试其他方法来完成它。通常使用事件处理程序手动触发提交