如何从Formik表单获取日期值并同步到其他日期字段？

步骤1：完善初始值定义 #

首先在Formik的initialValues中添加目标字段的初始值，避免Formik因字段未定义报错：

<Formik 
  initialValues={{ 
    date_debut: '', 
    date_fin: '',
    date_debut_repetition: '',
    date_fin_repetition: ''
  }}
  validationSchema={SubmitFormValidation}
  onSubmit={async (values) => {
    console.log(values.jour_mois);
    const dataSubmit = { 
      date_debut: values.date_debut, 
      date_fin: values.date_fin,
      // 提交时需包含同步后的字段
      date_debut_repetition: values.date_debut_repetition,
      date_fin_repetition: values.date_fin_repetition
    };
    // 后续提交逻辑
  }}
>

方法一：在自定义组件内监听同步 #

修改你的FieldDateTimeFormFormik组件，通过useFormikContext获取Formik实例，监听字段变化后同步值：

import { useFormikContext } from 'formik';
import React from 'react';

const FieldDateTimeFormFormik: React.FC<Props> = ({ 
  id, label, submitCount, error, dateMin = false, 
  widthLabel, dateMinValue, positionnement = 'row' 
}) => {
  const { setFieldValue, values } = useFormikContext();

  React.useEffect(() => {
    // 同步date_debut到date_debut_repetition
    if (id === 'date_debut' && values.date_debut) {
      // 可选：仅当目标字段为空时同步，避免覆盖用户手动修改
      if (!values.date_debut_repetition) {
        setFieldValue('date_debut_repetition', values.date_debut);
      }
    }
    // 同步date_fin到date_fin_repetition
    if (id === 'date_fin' && values.date_fin) {
      if (!values.date_fin_repetition) {
        setFieldValue('date_fin_repetition', values.date_fin);
      }
    }
  }, [id, values.date_debut, values.date_fin, values.date_debut_repetition, values.date_fin_repetition, setFieldValue]);

  return ( 
    <> 
      <FieldDefaultFormatFormFormik 
        id={id} 
        label={label} 
        submitCount={submitCount} 
        error={error} 
        widthLabel={widthLabel} 
        positionnement={positionnement}
      > 
        <Field 
          className="form-select" 
          name={id} 
          id={id} 
          component={DateTimePickers} 
          dateMin={dateMin} 
          dateMinValue={dateMinValue} 
        /> 
      </FieldDefaultFormatFormFormik> 
    </> 
  ); 
};

方法二：在Formik组件内部监听同步 #

如果不想修改自定义组件，可直接在Formik的渲染回调中添加监听逻辑：

<Formik
  // ...初始值、校验、提交逻辑
>
  {({ values, setFieldValue, errors, submitCount }) => {
    React.useEffect(() => {
      // 同步日期值
      if (values.date_debut && !values.date_debut_repetition) {
        setFieldValue('date_debut_repetition', values.date_debut);
      }
      if (values.date_fin && !values.date_fin_repetition) {
        setFieldValue('date_fin_repetition', values.date_fin);
      }
    }, [values.date_debut, values.date_fin, values.date_debut_repetition, values.date_fin_repetition, setFieldValue]);

    return (
      <div>
        {/* 原日期字段 */}
        <FieldDateTimeFormFormik 
          label={'Date de début *'} 
          id={'date_debut'} 
          submitCount={submitCount} 
          error={errors.date_debut} 
          widthLabel="w-[168px]" 
        /> 
        <FieldDateTimeFormFormik 
          label={'Date de fin *'} 
          id={'date_fin'} 
          submitCount={submitCount} 
          error={errors.date_fin} 
          widthLabel="w-[168px]" 
        />

        {/* 目标重复日期字段 */}
        <div className="flex gap-3"> 
          <FieldDateFormFormik 
            label={'Début répétition'} 
            id={'date_debut_repetition'} 
            submitCount={submitCount} 
            error={errors.date_debut_repetition} 
            widthLabel="w-[168px]" 
          /> 
          <FieldDateFormFormik 
            label={'Date fin répétition'} 
            id={'date_fin_repetition'} 
            submitCount={submitCount} 
            error={errors.date_fin_repetition} 
            widthLabel="w-[168px]" 
          /> 
        </div>
      </div>
    );
  }}
</Formik>

关键注意点 #

• 若允许用户手动修改重复日期字段，建议保留!values.date_debut_repetition这类判断，避免原字段变化时覆盖用户输入
• 确保目标字段date_debut_repetition和date_fin_repetition已在Formik的initialValues中定义

内容的提问来源于stack exchange，提问作者sofiane