如何将 Material UI Checkbox 与 formik 一起使用？

Question

我无法以正确的方式进行编码，以便 formik.values 将反映到 Material UI 的复选框中

Answer 1

将复选框包含在第三方表单包中有点棘手，Material UI 也对此无济于事。

您需要做的是使用该FormControlLabel组件来处理formik需要的onChange事件。然后在复选框上，您只需将选中的属性设置为 formik 的值中的任何值。

这是我用于复选框设置 isAdmin 值的示例。

const formik = useFormik({
  initialValues:{
     isAdmin: false
  },
});


<FormControlLabel
  control={<Checkbox checked={formik.values.isAdmin} />}
  label="is Admin"
  name="isAdmin"
  onChange={formik.handleChange}
/>

Answer 2

使用“如”

将as属性与 Formik Field 一起使用，并将所需的任何属性传递给 Field 本身。它将把它们传递到 FormControlLabel 上。例如，这里标签字段被传递到 FormControlLabel：

<Field
    type="checkbox"
    name="myFormikName"
    as={FormControlLabel}
    control={<Checkbox />}
    label="This will trigger my formik name field"
/>

使用“as”的多个复选框

如果您有多个具有相同名称（数组）的复选框，您需要像这样传递“checked”值。检查 Formik“名称”数组是否包含名称。

const { values } = useFormikContext()

render (

    {names?.map(name => (
        <Field
        type="checkbox"
        name="names"
        value={name.fullName}
        key={name.id}
        as={FormControlLabel}
        control={<Checkbox/>}
        checked={values.names.includes(name.fullName)}
        label={name.fullName}
        />
        ))}
)

使用“setFieldValue”

const { values, setFieldValue } = useFormikContext()

<FormControlLabel
  control={<Checkbox />}
  label="My mui label"
  checked={values.myMuiCheck}
  onChange={() =>
    setFieldValue(
      'myMuiCheck',
      !values.myMuiCheck,
    )
  }
/>