Как передать данные пользовательского интерфейса в Formik? - PullRequest
Новая
       6

Как передать данные пользовательского интерфейса в Formik?

0 голосов
/ 14 апреля 2020

Я пытаюсь добавить пользовательский интерфейс материала «Выбрать» в мой компонент Formik, но не могу передать значения в initialValues ​​Formik. 

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.

1 Ответ

1 голос
/ 14 апреля 2020

Для материала вы можете использовать эту замечательную библиотеку https://github.com/stackworx/formik-material-ui

Вот их примеры кодов и коробка https://codesandbox.io/s/915qlr56rp?file= / src / index.tsx

Если вы не хотите использовать их библиотеку, вы можете использовать опору компонента Formik, чтобы использовать свой пользовательский компонент

На основании вашего запроса на комментирование я написал здесь код в codeandbox https://codesandbox.io/s/react-formik-material-ui-select-huzv7?file= / src / App. js

Я не уверен, почему у вас есть переменные состояния для значений formik. Они обрабатываются 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>
  );
}
...