如何在React中使用Formik实现勾选checkbox后动态显示新select dropdown的表单功能

嘿，我之前刚搞定过类似的需求，用Formik来实现这个功能其实很直观，核心就是利用Formik的状态管理来控制组件的显示隐藏。下面给你完整的实现步骤和代码示例：

核心思路 #

Formik会帮我们管理表单的所有状态，包括checkbox的勾选状态。我们只需要：

1. 在initialValues里定义checkbox的初始状态（默认不勾选）和select字段的初始值
2. 渲染checkbox组件，绑定Formik的handleChange和values
3. 根据checkbox的状态（比如values.showSelect）来条件渲染select组件

完整代码示例 #

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const MyForm = () => {
  // 可选：定义表单校验规则，实现勾选后的必填校验
  const validationSchema = Yup.object({
    showSelect: Yup.boolean(),
    selectedOption: Yup.string().when('showSelect', {
      is: true,
      then: Yup.string().required('这个选项是必填项哦'),
      otherwise: Yup.string().nullable()
    })
  });

  return (
    <Formik
      initialValues={{
        showSelect: false, // checkbox初始设为不勾选
        selectedOption: '' // select字段初始值
      }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        // 提交表单的逻辑，这里可以打印查看表单值
        console.log('提交的表单数据:', values);
      }}
    >
      {({ values }) => (
        <Form>
          {/* Checkbox字段 */}
          <div>
            <Field type="checkbox" name="showSelect" id="showSelect" />
            <label htmlFor="showSelect">需要选择额外选项吗？</label>
          </div>

          {/* 条件渲染Select下拉框 */}
          {values.showSelect && (
            <div style={{ marginTop: '10px' }}>
              <label htmlFor="selectedOption">请选择选项：</label>
              <Field as="select" name="selectedOption" id="selectedOption">
                <option value="">-- 请选择 --</option>
                <option value="option1">选项1</option>
                <option value="option2">选项2</option>
                <option value="option3">选项3</option>
              </Field>
              <ErrorMessage name="selectedOption" component="div" style={{ color: 'red' }} />
            </div>
          )}

          {/* 提交按钮 */}
          <button type="submit" style={{ marginTop: '15px' }}>提交表单</button>
        </Form>
      )}
    </Formik>
  );
};

export default MyForm;

关键细节说明 #

• 我加了Yup的条件校验：当checkbox被勾选时，select字段自动变成必填项；如果没勾选，select可以为空，这个逻辑可以根据你的实际需求调整。
• 不需要手动写handleChange，Formik的Field组件会自动把状态同步到values里，省了很多手动维护状态的麻烦。
• 条件渲染的逻辑非常简单：{values.showSelect && <Select组件/>}，只有当checkbox勾选（values.showSelect为true）时，才会渲染select下拉框。

如果你要加样式或者扩展其他逻辑，直接在这个基础上修改就好啦！

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