React Formik - 不提交表单

Question

我有一个带日期选择器的简单表单：

export function ReportsFiltersForm() {
  const customerId = useRequiredIntParam('customerId')
  const params = new URLSearchParams(window.location.search)
  const initialValues = useMemo(() => createDeliveryReportsQueryParams(Object.fromEntries(params)), [params])
  const { push } = useHistory()

  const onSubmit = (values: DeliveryReportsQueryParams) => {
    console.log('submitting ', values)
    push(formatResultsPath(customerId, values))
  }

  return (
    <Formik initialValues={initialValues} onSubmit={onSubmit} enableReinitialize>
      <>
        <ReportsDashboardFiltersFormFields />
      </>
    </Formik>
  )
}

export function ReportsFiltersFormFields() {
  const { values } = useFormikContext<any>()
  const showCustomDates = values.range === 'custom'

  return (
    <div className="flex gap-2">
      {showCustomDates && <FormikCustomDates />}
      <FormikDateRange options={dateRangeOptions} />
      <FormikSearchButton />
    </div>
  )
}

export function FormikDateRange({ name = 'range', options = dateRangeOptions }: FormikDateRangeProps) {
  return (
    <div>
      <FormikSelect name={name} aria-label={i18next.t('date.date')}>
        <FormikSelectOptions options={options as unknown as FormikSelectOption[]} />
      </FormikSelect>
    </div>
  )
}

export function FormikSearchButton(props: { loading?: boolean }) {
  return (
    <ButtonBase type="submit" variant="primary" disabled={props.loading} className="!px-8">
      {i18next.t('button.search')}
    </ButtonBase>
  )
}

问题是当我单击搜索按钮表单时没有提交任何内容。我在这里做错了什么？

Answer 1

您是否尝试过向 ButtonBase 组件添加 onClick 之类的操作：

 <ButtonBase type="submit" variant="primary" onClick={onSubmit} disabled={props.loading} className="!px-8">
  {i18next.t('button.search')}
</ButtonBase>

Answer 2

我没有意识到我还需要在 Formik 中使用 Form 标签，所以这解决了问题：

<Formik initialValues={initialValues} onSubmit={onSubmit} enableReinitialize>
  <Form>
    <ReportsDashboardFiltersFormFields />
  </Form>
</Formik>

React Formik - 不提交表单

React Formik - not submitting form

reactjs

formik