点击Checkbox后未显示文本字段，Collapse组件失效问题排查

以下是导致功能失效的几个核心问题及修复方案：

1. 初始值缺失sub字段 #

你的defaultInitialIngestObject仅定义了pushEnabled，但Checkbox绑定的是sub字段，初始时formik.values.sub为undefined。而Collapse的in属性需要明确布尔值，undefined会被解析为false，导致默认不显示，且可能影响后续状态更新。

修复：在初始值对象中添加sub字段：

let defaultInitialIngestObject = {
  pushEnabled: true,
  sub: false // 新增初始状态字段
}

2. Checkbox错误使用onClick事件 #

MUI的Checkbox应使用onChange监听状态变化，onClick在部分场景下触发时机异常，会导致状态更新不及时。

修复：替换事件为onChange，同时给checked属性加默认值避免undefined：

<Checkbox size="large"
  onChange={(evt) => formik.setFieldValue("sub", evt.target.checked)}
  checked={formik.values.sub || false}
/>

3. Grid结构缺少container属性 #

外层<Grid item xs={12}>未添加container属性，MUI的Grid需要container作为容器包裹item，否则布局会异常，甚至导致Collapse内容被隐藏。

修复：修改外层Grid为容器类型：

<Grid container xs={12}>
  {/* 内部item Grid */}
</Grid>

4. Collapse的in属性确保布尔值 #

为彻底避免formik.values.sub为undefined的情况，用双感叹号强制转换为布尔值：

<Collapse in={!!formik.values.sub}>

完整修正代码 #

import React from 'react';
import { Grid, FormControlLabel, Checkbox} from '@mui/material';
import { Collapse } from 'react-collapse';
import { useFormik } from 'formik';
import MyTextField from './MyTextField';

let defaultInitialIngestObject = {
  pushEnabled: true,
  sub: false
}

export default function App(props) {
  const { initialValues } = props
  const formik = useFormik({
    initialValues: initialValues || defaultInitialIngestObject,
  });

  return (
    <div>
      <Grid container xs={12}>
        <Grid item xs={4}>
          <FormControlLabel
            style={{ margin: 0, padding: 0, marginTop: '8px', verticalAlign: 'top' }}
            label="Submit"
            control={
              <Checkbox size="large"
                onChange={(evt) => formik.setFieldValue("sub", evt.target.checked)}
                checked={formik.values.sub || false}
              />
            }
          />
        </Grid>

        <Collapse in={!!formik.values.sub}>
          <Grid item xs={4}>
            <MyTextField
              disabled={!formik.values.sub}
              id="firs"
              label="First"
              formik={formik}
            />
          </Grid>
        </Collapse>
      </Grid>
    </div>
  )
}

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