如何自定义Formik handleChange以同时触发Redux Action？

核心思路 #

自定义handleChange方法，先调用Formik原生方法更新表单值，再触发Redux action将选中值同步到Redux store。若需要严格保证状态一致性，可利用Formik方法的回调确保表单值更新完成后再执行Redux操作。

修改步骤 #

• 确保子组件能获取到Formik的formik实例、Redux的dispatch方法及目标action
• 编写自定义handleChange函数，整合Formik更新与Redux触发逻辑
• 将下拉组件的onChange替换为自定义方法

完整代码示例 #

父组件StudentList（关键片段）

import { useDispatch } from 'react-redux';
import { updateFilterValue } from '../redux/actions/studentActions';
import StudentHeader from './StudentHeader';
import { Formik, Form } from 'formik';

const StudentList = () => {
  const dispatch = useDispatch();
  const initialValues = { gradeFilter: 'all' };

  return (
    <Formik initialValues={initialValues}>
      {formikProps => (
        <Form>
          <StudentHeader 
            formik={formikProps} 
            dispatch={dispatch} 
            updateFilterValue={updateFilterValue}
          />
          {/* 学生列表渲染内容 */}
        </Form>
      )}
    </Formik>
  );
};

子组件StudentHeader（修改后）

import PerformantDropdown from './PerformantDropdown';

const StudentHeader = ({ formik, dispatch, updateFilterValue }) => {
  const customHandleChange = (selectedValue) => {
    // 用Formik的setFieldValue更新表单值，字段名对应你的表单key
    formik.setFieldValue('gradeFilter', selectedValue, () => {
      // 回调中触发Redux action，确保Formik状态更新完成后同步
      dispatch(updateFilterValue(selectedValue));
    });
  };

  // 若PerformantDropdown返回的是原生event对象，可改用以下写法
  // const customHandleChange = (event) => {
  //   formik.handleChange(event);
  //   dispatch(updateFilterValue(event.target.value));
  // };

  return (
    <div className="student-header">
      <PerformantDropdown
        name="gradeFilter"
        value={formik.values.gradeFilter}
        onChange={customHandleChange}
        options={[
          { label: '全部年级', value: 'all' },
          { label: '一年级', value: 'grade1' },
          { label: '二年级', value: 'grade2' }
        ]}
      />
    </div>
  );
};

export default StudentHeader;

注意事项 #

• 若Formik字段名与Redux存储的key不一致，需对应调整参数
• 自定义下拉组件的onChange返回值可能是选中值或原生event，需根据组件实际情况调整函数逻辑
• 利用setFieldValue的回调参数，可避免Formik与Redux状态不同步的问题

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