单击新的选择下拉菜单后使用formik重新显示复选框

import { useFormik } from 'formik';

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      dropdownValue: '',
      checkbox1: false,
      checkbox2: false,
    },
    onSubmit: values => {
      // 处理表单提交逻辑
    },
  });

  // 其他表单元素的渲染和交互逻辑

  return (
    <form onSubmit={formik.handleSubmit}>
      {/* 下拉菜单 */}
      <select
        name="dropdownValue"
        value={formik.values.dropdownValue}
        onChange={formik.handleChange}
      >
        {/* 下拉菜单选项 */}
        <option value="">请选择</option>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
      </select>

      {/* 根据选择的选项显示复选框 */}
      {formik.values.dropdownValue === 'option1' && (
        <div>
          <label>
            <input
              type="checkbox"
              name="checkbox1"
              checked={formik.values.checkbox1}
              onChange={formik.handleChange}
            />
            复选框1
          </label>
        </div>
      )}

      {formik.values.dropdownValue === 'option2' && (
        <div>
          <label>
            <input
              type="checkbox"
              name="checkbox2"
              checked={formik.values.checkbox2}
              onChange={formik.handleChange}
            />
            复选框2
          </label>
        </div>
      )}

      {/* 其他表单元素 */}
      {/* ... */}

      <button type="submit">提交</button>
    </form>
  );
};

export default MyForm;