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作为道具与其他的一起传递

 {({

     submitForm or handleSubmit,

      values,

      handleBlur,

      handleChange,

      setFieldValue,

      isSubmitting,

    }) => (

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

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

  Pay Now

</Button>

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

但请记住，当某些事情没有按照您想要的方式进行时，请尝试其他方法来完成它。通常使用事件处理程序手动触发提交