Question

我在使用Formik Field中使用的Material UI库中的AutoComplete组件中呈现initialValues时遇到问题。尽管事实是如果提交了表单，则它们在values变量中进行传递，但作为初始传递的值不会呈现在组件中。

如果事实很重要，我还将使用material-ui-formik-components库。

下面显示的代码提出了这个问题。

import React from "react";
import { Formik, Form, Field } from "formik";
import { object, array } from "yup";
import { Autocomplete } from "material-ui-formik-components/Autocomplete";

const skills = [

  {
    "label": "PostgreSQL",
    "value": "PostgreSQL"
  },
  {
    "label": "Python",
    "value": "Python"
  },
  {
    "label": "React",
    "value": "React"
  },
  {
    "label": "Redis",
    "value": "Redis"
  },
  {
    "label": "Swift",
    "value": "Swift"
  },
  {
    "label": "Webpack",
    "value": "Webpack"
  }
]
const validationSchema = object().shape({
  skills: array().required("At least one skill is required")
});

const initialValues = {
  username: "",
  gender: "",
  country: "",
  skills: [
    {
      label: "PostgreSQL",
      value: "PostgreSQL"
    }
  ],
  birthdate: null
};

const SimpleFormExample = () => (
  <div>
    <h1>Simple Form Example</h1>
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      validateOnBlur={false}
      validateOnChange
      onSubmit={values => {
        console.log(values);
      }}
    >
      {formik => (
        <Form noValidate autoComplete="off">
          <Field
            name="skills"
            options={skills}
            component={Autocomplete}
            textFieldProps={{
              label: "Skills",
              required: true,
              variant: "outlined"
            }}
            multiple
          />

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

export default SimpleFormExample;

如何在formik中显示initialValues？

Answer 1

import React from "react";
import { Formik, Form, Field } from "formik";
import { object, array } from "yup";
import { Autocomplete } from "material-ui-formik-components/Autocomplete";
import { TextField } from "@material-ui/core";
import { fieldToTextField } from "formik-material-ui";

const skills = [
  {
    label: "PostgreSQL",
    value: "PostgreSQL"
  },
  {
    label: "Pythonaa",
    value: "Pythona"
  },
  {
    label: "React",
    value: "React"
  },
  {
    label: "Redis",
    value: "Redis"
  },
  {
    label: "Swift",
    value: "Swift"
  },
  {
    label: "Webpack",
    value: "Webpack"
  }
];
const validationSchema = object().shape({
  skills: array().required("At least one skill is required")
});

const initialValues = {
  username: "abc",
  gender: "",
  country: "",
  skills: [
    {
      label: "Swift",
      value: "Swift"
    },
    {
      label: "Webpack",
      value: "Webpack"
    }
  ],
  birthdate: null
};

const FormikAutocomplete = ({ textFieldProps, ...props }) => {
  const {
    form: { setTouched, setFieldValue }
  } = props;
  const { error, helperText, ...field } = fieldToTextField(props);
  const { name } = field;

  return (
    <Autocomplete
      {...props}
      {...field}
      onChange={(_, value) => setFieldValue(name, value)}
      onBlur={() => setTouched({ [name]: true })}
      getOptionSelected={(item, current) => item.value == current.value}
      renderInput={props => (
        <TextField
          {...props}
          {...textFieldProps}
          helperText={helperText}
          error={error}
        />
      )}
    />
  );
};

const SimpleFormExample = () => (
  <div>
    <h1>Simple Form Example</h1>
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      validateOnBlur={false}
      validateOnChange
      onSubmit={values => {
        console.log(values);
      }}
    >
      {formik => (
        <Form>
          <Field
            name="skills"
            component={FormikAutocomplete}
            label="Skills"
            options={skills}
            textFieldProps={{
              fullWidth: true,
              margin: "normal",
              variant: "outlined"
            }}
            multiple
          />

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

export default SimpleFormExample;

您可以检查我的代码和框 https://codesandbox.io/s/optimistic-kare-9wqfq?file=/src/Component.tsx:0-2327

您还可以更改AutoComplete的getOptionSelected属性来确定是否选择了一个选项。

初始值未显示在Formik字段中的“材料UI”组件的“自动完成”中

1 个答案: