@mui/material <Checkbox>

Question

我想用Formik和Mui建立一个多步反应形式。我无法理解如何绑定/控制mui复选框元素。

import { Button, Checkbox, Typography } from "@mui/material";
import { Field, Form, Formik } from "formik";
import "./styles.css";

export default function App() {
  var fruitValues = ["apple", "banana"];
  function handleSubmit(values, actions) {
    fruitValues = values.fruit;
    console.debug(values.fruit);
  }

  return (
    <div className="App">
      <Formik initialValues={{ fruit: ["apple"] }} onSubmit={handleSubmit}>
        <Form id="test2">
          <Checkbox name="fruit" value="apple" label="Apple" />
          <Checkbox name="fruit" value="banana" label="Banana" />
          <Checkbox name="fruit" value="orange" label="Orange" />
          <Button type="submit">Submit</Button>
        </Form>
      </Formik>
    </div>
  );
}

请参阅https://codesandbox.io/s/thirsty-wing-91glso?file=/src/App.js:0-1380

Answer 1

我也在做这个。似乎有些东西应该在文档中覆盖，但实际上并非如此。

有这个例子。包括做这样的事..。

<Form>
  <Field
    type="email"
    name="email"
    component={TextField}
    color={"error"}
  />

但没有任何解释，这是从何而来，或在这里发生了什么。

Answer 2

我的反应有点晚，但我也面临着同样的问题，并使它工作如下。

import React from 'react'
import { Field, Form, Formik } from 'formik'
import Checkbox from '@mui/material/Checkbox'
import FormControlLabel from '@mui/material/FormControlLabel'

export default function Example() {
  return (
    <Formik>
      <Form>
        <Field name="terms_of_condition">
          {({ field }) => (
            <FormControlLabel
              onChange={field.onChange}
              control={<Checkbox name="terms_of_condition" />}
              label="Terms of conditions"
              sx={sx}
              value="on"
            />
          )}
        </Field>
      </Form>
    </Formik>
  )
}