如何在redux-form的单个Field组件中关联多个子组件？

看起来你在处理Formik里成对的复选框+下拉框联动场景时踩了坑——这种带状态依赖+数据映射的需求确实容易在字段绑定上出错，我来帮你梳理下正确的实现思路和代码：

你当前用嵌套<Field>的方式是不合理的：Formik的<Field>是用来绑定单个表单字段的，嵌套会导致字段路径混乱，而且没法直接在组件间共享状态来控制下拉框的禁用和值重置。我们需要把每个复选框和下拉框作为独立的表单字段，同时通过Formik的状态管理实现二者的联动。

1. 清晰规划字段结构：给每个条目对应的复选框和下拉框分配唯一的字段名（比如用条目ID做前缀），避免命名冲突，也方便后续数据映射。
2. 实现状态联动：在复选框切换时，同步更新对应下拉框的值——取消勾选时重置为none/0，并通过复选框状态控制下拉框的禁用状态。
3. 提交时整理数据：过滤出已勾选的条目，将复选框状态和下拉框值配对，再按照分类信息完成映射。

假设你用的是函数组件，这里给出基于useFormik的实现：

import { useFormik } from 'formik';

// 示例条目数据，包含分类、唯一ID、下拉选项等信息
const formItems = [
  { id: 'catA-item1', label: '分类A - 选项1', category: 'categoryA', dropdownOpts: ['选项1-1', '选项1-2', 'none'] },
  { id: 'catA-item2', label: '分类A - 选项2', category: 'categoryA', dropdownOpts: ['选项2-1', '选项2-2', 'none'] },
  { id: 'catB-item1', label: '分类B - 选项1', category: 'categoryB', dropdownOpts: ['选项X', '选项Y', 'none'] },
];

const LinkedForm = () => {
  // 初始化表单值：每个条目对应checked状态和dropdown值
  const initialFormValues = formItems.reduce((acc, item) => {
    acc[`${item.id}-checked`] = false;
    acc[`${item.id}-value`] = 'none';
    return acc;
  }, {});

  const formik = useFormik({
    initialValues: initialFormValues,
    onSubmit: (values) => {
      // 按分类映射成对数据
      const categorizedData = formItems.reduce((acc, item) => {
        const isChecked = values[`${item.id}-checked`];
        if (isChecked) {
          const dropdownVal = values[`${item.id}-value`];
          // 按分类分组
          if (!acc[item.category]) acc[item.category] = [];
          acc[item.category].push({
            label: item.label,
            isChecked: isChecked,
            dropdownValue: dropdownVal
          });
        }
        return acc;
      }, {});

      console.log('最终分类映射数据:', categorizedData);
      // 这里可以执行提交逻辑，比如发送到后端
    },
  });

  return (
    <form onSubmit={formik.handleSubmit} style={{ padding: '20px' }}>
      {formItems.map((item) => {
        const checkboxFieldKey = `${item.id}-checked`;
        const dropdownFieldKey = `${item.id}-value`;

        return (
          <div key={item.id} style={{ marginBottom: '15px' }}>
            {/* 复选框部分 */}
            <label style={{ marginRight: '10px' }}>
              <input
                type="checkbox"
                name={checkboxFieldKey}
                checked={formik.values[checkboxFieldKey]}
                onChange={(e) => {
                  // 更新复选框状态
                  formik.setFieldValue(checkboxFieldKey, e.target.checked);
                  // 取消勾选时重置下拉框值
                  if (!e.target.checked) {
                    formik.setFieldValue(dropdownFieldKey, 'none');
                  }
                }}
              />
              {item.label}
            </label>

            {/* 下拉框部分 */}
            <select
              name={dropdownFieldKey}
              value={formik.values[dropdownFieldKey]}
              onChange={formik.handleChange}
              disabled={!formik.values[checkboxFieldKey]}
            >
              {item.dropdownOpts.map(opt => (
                <option key={opt} value={opt}>{opt}</option>
              ))}
            </select>
          </div>
        );
      })}

      <button type="submit" style={{ padding: '8px 16px' }}>提交表单</button>
    </form>
  );
};

export default LinkedForm;

如果你用的是自己封装的MyCheckBoxComponent和MyDropDownComponent，只需要把原生的input/select替换成你的组件，并传递对应的Formik props即可：

{/* 替换复选框 */}
<MyCheckBoxComponent
  name={checkboxFieldKey}
  checked={formik.values[checkboxFieldKey]}
  onChange={(e) => {
    formik.setFieldValue(checkboxFieldKey, e.target.checked);
    if (!e.target.checked) {
      formik.setFieldValue(dropdownFieldKey, 'none');
    }
  }}
  label={item.label}
/>

{/* 替换下拉框 */}
<MyDropDownComponent
  name={dropdownFieldKey}
  value={formik.values[dropdownFieldKey]}
  onChange={formik.handleChange}
  disabled={!formik.values[checkboxFieldKey]}
  options={item.dropdownOpts}
/>

• 字段命名唯一：用条目ID做前缀确保每个字段唯一，避免不同条目间的状态干扰。
• 联动逻辑集中处理：把下拉框的重置逻辑放在复选框的onChange中，确保状态同步。
• 禁用状态直接绑定：下拉框的disabled属性直接关联对应复选框的状态，无需额外维护本地状态。
• 数据映射高效处理：提交时用reduce遍历条目，过滤已勾选项并按分类分组，代码简洁高效。

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