Reactjs 使用材料界面'；s自动完成使用Formik在下拉列表中显示不同的值，但在Formik状态下设置不同的值

我试图用Formik使用MaterialUI的自动完成功能。下面是我编写的一个自定义自动完成组件，用于Formik

import React from "react";
import Autocomplete from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";
import { fieldToTextField } from "formik-material-ui";

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 })}
      renderInput={(props) => (
        <TextField
          {...props}
          {...textFieldProps}
          helperText={helperText}
          error={error}
        />
      )}
    />
  );
};

export default FormikAutocomplete;

我希望自动完成下拉列表显示选项男性，女性。 但我希望一旦从下拉列表中选择，formik状态将分别保存M、F。当前保存整个对象

---

如何做到这一点？

在

FormikaAutoComplete

组件中

• 在自动完成的更改中使用setFieldValue
• 使用

  getOptionLabel

  中的

  gender\u name\u long

  显示

  男性

  ，

  女性

• 在

  getoptions selected

  中使用

  gender\u name\u short

  来使用

  M

  或

  F

最后，当您提交时，您将看到

M

/

F

而不是

男性/女性

const性别=[
{gender_name_short:“F”，gender_name_long:“Female”}，
{性别名称短：“M”，性别名称长：“男性”}
];
const validationSchema=object（）.shape({
//genderObj:array（）.required（“至少需要一种性别”）
});
常量初始值={
用户名：“abc”，
国家：“，
性别：“M”，
出生日期：空
};
常量FormikAutocomplete=（{textFieldProps，…props}）=>{
常数{
形式：{setTouched，setFieldValue}
}=道具；
常量{error，helperText，…field}=fieldToTextField（props）；
常量{name}=字段；
返回(
{
setFieldValue（“性别”，data.gender\u name\u short）；
}}
onBlur={（）=>setTouched（{[name]：true}）
//getOptionLabel={item=>item.gender\u name\u long}//{
//console.log（'==>'，typeof item==“string”？props.options.find（i=>i.gender\u name\u short==item.gender\u name\u long:item.gender\u name\u long）
返回项的类型==“字符串”
？props.options.find（i=>i.gender\u name\u short==item）
.gender_name_long
：item.gender\u name\u long；
}}
//getOptionLabel={item=>typeof item==='string'？props.options.find（i=>i.gender\u name\u short==item.gender\u name\u long:item.gender\u name\u long}
getOptionSelected={（项目，当前）=>{
return item.gender\u name\u short==当前；
}}
//defaultValue={'hi'}
renderInput={props=>(
)}
/>
);
};
常量SimpleFormExample=（）=>(
简单表单示例
{
console.log（值）；
resetForm（）；
//设置提交（假）；
}}
>
{formik=>(
提交
)}
);
导出默认的SimpleFormExample；

我曾尝试过此操作，但在下拉列表中选择该选项时出现以下错误。Material UI:Autocomplete的

getOptionLabel

方法返回的是未定义的，而不是“F”的字符串。您的演示还将在控制台中返回错误。如何消除该错误。此外，我忘了提及，除了日志中的错误外，文本字段值在选择时为空。更新了答案以及codesandbox演示（使用答案中的相同链接，刷新浏览器）。。。。。所有的问题都解决了。。。。简单说明一下，因为对于您的用例，您必须使用onChange、

setFormValue

等，您也可以不使用

字段

进行

gender

，而直接使用auto complete并在onChange时执行setFormValue。。。如果这个

快速注释

看起来令人困惑，请忽略它，按照答案使用工作代码。。。谢谢。。

<Field
  name="title"
  component={FormikAutocomplete}
  options={gender}
  getOptionLabel={(option) => option.title_name_long}
  textFieldProps={{
    label: "Title",
    required: true,
    variant: "outlined",
    margin: "dense",
  }}
/>

gender=[{gender_name_short:"F",gender_name_long:"Female},{gender_name_short:"M",gender_name_long:"Male}]