升级react-formik-ui至5.1.9后Checkbox组件onChange事件无法触发

根因分析 #

• Checked属性类型不匹配：现有代码中checked属性接收的是Array.find()返回的对象/undefined/空字符串，不符合Checkbox要求的布尔值类型。v5.x版本对属性校验严格，类型错误会导致组件内部状态判定异常，直接拦截点击事件触发onChange回调。
• 重复绑定导致属性冲突：react-formik-ui v5.x的Checkbox组件已经内置了Formik双向绑定逻辑，无需在Field的render回调中手动传递form.handleChange、form.handleBlur、手动计算checked值，重复传递的冲突属性会覆盖内置的事件绑定逻辑，导致自定义回调无法触发。
• 版本兼容变更：v4.x版本支持的手动传参模式在v5.x中已被移除，原有写法不再兼容。

修正后代码 #

import {Checkbox} from 'react-formik-ui';

const RenderCheckBox = ({properties}) => {
  return (
    <Fragment key={properties.name}>
      {!properties.isHidden &&
      <FormGroup key={properties.name}>
        <ControlLabel>{properties.label} {properties.required &&
        <span className="required"> * </span>} </ControlLabel>
        <Row>
          {properties.fields.map((element, key) => {
            return (
              <Col key={key} className={element.className}>
                <Checkbox 
                  key={key}
                  name={element.name}
                  required={properties.required}
                  disabled={!!element.isDisabled}
                  text={element.label}
                  value={element.value}
                  onChange={event => {
                    console.log("onChange Ran!!")
                    element.onChange?.(event);
                  }}
                />
              </Col>
            )
          })}
        </Row>
      </FormGroup>
      }
    </Fragment>
  )
};

说明 #

1. 移除了外层多余的Field组件嵌套，v5.x的Checkbox本身已经支持自动绑定Formik上下文状态，不需要额外用Field包裹手动处理状态同步。
2. 移除了手动计算的checked属性，组件会自动根据Formik中对应name的字段值匹配value属性判断选中状态。
3. 移除了重复传递的form.handleChange、form.handleBlur，内置逻辑会自动处理表单状态更新，自定义onChange回调会在内部状态更新完成后触发。
4. 简化了disabled属性的写法，用双感叹号直接转布尔值。

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