React Formik中checkbox取消勾选时如何清空关联字段的值

核心实现逻辑是监听checkbox的状态变化，当状态变为未勾选时，调用Formik提供的setFieldValue方法手动清空两个关联字段的值，有两种常用实现方式：

• 方式1：直接修改checkbox的onChange回调，适合简单场景

<Formik
  initialValues={{
    enableExtraFields: false,
    extraField1: '',
    extraField2: ''
  }}
  onSubmit={values => console.log(values)}
>
  {({ values, setFieldValue }) => (
    <Form>
      <input
        type="checkbox"
        name="enableExtraFields"
        onChange={async (e) => {
          // 先更新checkbox本身的状态
          await setFieldValue('enableExtraFields', e.target.checked)
          // 未勾选时清空关联字段
          if (!e.target.checked) {
            setFieldValue('extraField1', '')
            setFieldValue('extraField2', '')
          }
        }}
      />
      {/* 关联字段条件渲染 */}
      {values.enableExtraFields && (
        <>
          <input name="extraField1" />
          <input name="extraField2" />
        </>
      )}
      <button type="submit">提交</button>
    </Form>
  )}
</Formik>

加await是为了保证checkbox状态更新完成后再执行清空操作，避免时序异常。

• 方式2：使用useEffect监听checkbox值变化，适合逻辑复杂、多处会修改checkbox状态的场景

// 可以抽离为单独的组件逻辑
const { values, setFieldValue } = useFormikContext();

useEffect(() => {
  if (!values.enableExtraFields) {
    setFieldValue('extraField1', '')
    setFieldValue('extraField2', '')
    // 如果需要同时清除对应字段的校验错误，可以加下面两行
    // setFieldError('extraField1', undefined)
    // setFieldError('extraField2', undefined)
  }
}, [values.enableExtraFields, setFieldValue])

该方式不管是用户手动点击checkbox，还是其他业务逻辑修改了enableExtraFields的值，都会自动触发清空逻辑，适用范围更广。

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