如何將 Material UI 數據傳遞給 Formik？

Question

我正在嘗試將 Material UI“選擇”添加到我的 Formik 組件，但無法將值傳遞給 Formik 的 initialValues。

const [hours, setHours] = React.useState('');
const handleHourChange = ({ target }) => {
    setHours(target.value);
};

<Formik
   initialValues={{
     price: ''   //not Material UI. Works.
     hours: hours //from Material UI
   }} 

  <Form>
     <label htmlFor={'price'}> Price </label>
     <Field
        name={'price'}
        type="text"            //this Field (not Material UI) works fine.
     />

     //...

     //the below, which is Material UI's 
     //doesn't send its values to Formik's initialValues

     <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Hours</InputLabel>
        <Select
          name={'hours'} //I added this name prop but not sure it's making any difference
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={hours}
          onChange={handleHourChange}>
          <MenuItem value={60}>01</MenuItem>
          <MenuItem value={120}>02</MenuItem>
        </Select>
      </FormControl>

   </Form>
</Formik>

可以做些什么來解決這個問題？ 我似乎不知道如何正確獲取 Material UI 的值以將它們添加到 Formik。

Answer 1

對於材料 ui，您可以使用這個很棒的庫https://github.com/stackworx/formik-material-ui

這是他們的示例 codesandbox https://codesandbox.io/s/915qlr56rp?file=/src/index.tsx

如果你不想使用他們的庫，你可以使用 Formik 的 component prop 來使用你的自定義組件

---

根據您的評論請求，我在 codesandbox https://codesandbox.io/s/react-formik-material-ui-select-huzv7?file=/src/App.js中編寫了代碼

我不確定為什么 formik 值有 state 個變量。 這些由 formik 處理。 我們不需要手動處理它們。

import React from "react";
import { Formik, Form, Field } from "formik";
import {
  Select,
  InputLabel,
  MenuItem,
  FormControl,
  Button
} from "@material-ui/core";
import "./styles.css";

const CustomizedSelectForFormik = ({ children, form, field }) => {
  const { name, value } = field;
  const { setFieldValue } = form;

  return (
    <Select
      name={name}
      value={value}
      onChange={e => {
        setFieldValue(name, e.target.value);
      }}
    >
      {children}
    </Select>
  );
};

export default function App() {
  /*
    You don't need to handle the formik values as state.
    Formik handles it itself
    const [hours, setHours] = React.useState("");
    const handleHourChange = ({ target }) => {
      setHours(target.value);
    };
  */

  return (
    <Formik
      initialValues={{
        price: "abcv", //not Material UI. Works.
        hours: 60 //from Material UI
      }}
      onSubmit={(values, actions) => {
        alert("values:" + JSON.stringify(values));
      }}
    >
      <Form>
        <label htmlFor={"price"}> Price </label>
        <Field
          name={"price"}
          type="text" //this Field (not Material UI) works fine.
        />

        <FormControl>
          <InputLabel id="demo-simple-select-label">Hours</InputLabel>
          <Field name="hours" component={CustomizedSelectForFormik}>
            <MenuItem value={60}>01</MenuItem>
            <MenuItem value={120}>02</MenuItem>
          </Field>
        </FormControl>
        <Button type="submit">Submit</Button>
      </Form>
    </Formik>
  );
}