如何显示material-ui自动完成字段的initialValues？

Question

我使用material-ui (v5) 和formik 的自动完成字段来生成我的表单。在这个表单上，我有一些定义为常量的列表。

我使用 api 来获取此列表的默认值。此 api 仅返回选项的“代码”，而不返回其标签。

<Formik
        enableReinitialize
        initialValues={initialFormValues}
        validationSchema={Yup.object().shape({
[...]
<Autocomplete
  error={Boolean(touched.civility && errors.civility)}
  helperText={touched.civility && errors.civility}
  label="Civility"
  margin="normal"
  name="civility"
  onBlur={handleBlur}
  onChange={(e, value) => setFieldValue('civility', value)}
  options={civilities}
  value={values.civility}
  getOptionLabel={(option) =>
    option.name ? option.name : ''
  }
  isOptionEqualToValue={(option, value) => option.code === value}
  renderInput={(params) => (
    <TextField
      {...params}
      variant="outlined"
      label={<Trans>Civility</Trans>}
    />
  )}
/>

我的参数 isOptionEqualToValue 很好，因为即使该值没有显示在输入中，它也可以在列表中很好地选择。

您可以看到输入文本字段为空：

但是如果我展开列表，我可以看到我的“ms”值已被选择：

我应该怎么做才能使输入文本包含默认值？

Answer 1

克隆上面的代码片段后，问题出现在 中getOptionLabel，option参数是一个字符串值，因此它没有name属性并且显示为空字符串。这是一个在线示例codesandbox。

import { useState } from "react";
import { Formik, Form } from "formik";
import Autocomplete from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";

export default function App() {
  const civilities = ["Mr", "Ms", "Other"];
  const [values, setValues] = useState({
    civility: "Ms"
  });

  const handleBlur = (e) => {
    console.log("Blur:", e.target.value);
  };

  const setFieldValue = (type, value) => {
    setValues((oldValues) => ({ ...oldValues, [type]: value }));
  };

  return (
    <Formik err>
      {({ errors, touched }) => (
        <Form>
          <Autocomplete
            error={Boolean(touched.civility && errors.civility)}
            helperText={touched.civility && errors.civility}
            label="Civility"
            margin="normal"
            name="civility"
            onBlur={handleBlur}
            onChange={(e, value) => setFieldValue("civility", value)}
            options={civilities}
            value={values.civility}
            isOptionEqualToValue={(option, value) => option.code === value}
            renderInput={(params) => (
              <TextField {...params} variant="outlined" label="Civility" />
            )}
          />
        </Form>
      )}
    </Formik>
  );
}