当Formik初始值含disabled字段默认true时，如何使用Formik复选框？

核心思路是将复选框的选中状态与字段值取反绑定，同时在触发变更时同步更新字段的反向值，具体实现有以下几种方式：

方式一：基于useFormik Hook直接处理 #

import { useFormik } from 'formik';

// 你的初始字段值
const initialValues = {
  liveDisabled: true,
  rasaDisabled: true,
  visualDisabled: true
};

const MyForm = () => {
  const formik = useFormik({
    initialValues,
    onSubmit: (values) => {
      // 提交时可直接使用转换后的字段值
      console.log(values);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <div>
        <label htmlFor="live">Live</label>
        <input
          id="live"
          type="checkbox"
          // 字段值为true时，复选框显示未选中
          checked={!formik.values.liveDisabled}
          // 勾选时将字段设为false，取消勾选设为true
          onChange={() => {
            formik.setFieldValue('liveDisabled', !formik.values.liveDisabled);
          }}
        />
      </div>

      <div>
        <label htmlFor="rasa">Rasa</label>
        <input
          id="rasa"
          type="checkbox"
          checked={!formik.values.rasaDisabled}
          onChange={() => {
            formik.setFieldValue('rasaDisabled', !formik.values.rasaDisabled);
          }}
        />
      </div>

      <div>
        <label htmlFor="visual">Visual</label>
        <input
          id="visual"
          type="checkbox"
          checked={!formik.values.visualDisabled}
          onChange={() => {
            formik.setFieldValue('visualDisabled', !formik.values.visualDisabled);
          }}
        />
      </div>

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

方式二：用Formik Field组件自定义渲染 #

import { Formik, Form, Field } from 'formik';

const initialValues = {
  liveDisabled: true,
  rasaDisabled: true,
  visualDisabled: true
};

const MyForm = () => {
  return (
    <Formik initialValues={initialValues} onSubmit={(values) => console.log(values)}>
      {({ setFieldValue, values }) => (
        <Form>
          <Field name="liveDisabled">
            {({ field }) => (
              <div>
                <label htmlFor="live">Live</label>
                <input
                  id="live"
                  type="checkbox"
                  checked={!field.value}
                  onChange={() => setFieldValue('liveDisabled', !values.liveDisabled)}
                />
              </div>
            )}
          </Field>

          <Field name="rasaDisabled">
            {({ field }) => (
              <div>
                <label htmlFor="rasa">Rasa</label>
                <input
                  id="rasa"
                  type="checkbox"
                  checked={!field.value}
                  onChange={() => setFieldValue('rasaDisabled', !values.rasaDisabled)}
                />
              </div>
            )}
          </Field>

          <Field name="visualDisabled">
            {({ field }) => (
              <div>
                <label htmlFor="visual">Visual</label>
                <input
                  id="visual"
                  type="checkbox"
                  checked={!field.value}
                  onChange={() => setFieldValue('visualDisabled', !values.visualDisabled)}
                />
              </div>
            )}
          </Field>

          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
};

优化方案：封装复用反向复选框组件 #

如果需要多处使用这类反向绑定的复选框，可以封装组件减少重复代码：

const ReverseCheckbox = ({ label, name, formik }) => {
  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <input
        id={name}
        type="checkbox"
        checked={!formik.values[name]}
        onChange={() => formik.setFieldValue(name, !formik.values[name])}
      />
    </div>
  );
};

// 使用示例
<ReverseCheckbox label="Live" name="liveDisabled" formik={formik} />
<ReverseCheckbox label="Rasa" name="rasaDisabled" formik={formik} />
<ReverseCheckbox label="Visual" name="visualDisabled" formik={formik} />

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