Question

我正在尝试将材料UI的自动完成功能与Formik一起使用。这是我编写的用于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;

这是组件的调用方式

<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}]

我希望“自动完成”下拉列表显示男，女选项。但是我希望formik状态从下拉列表中选择后分别保存M，F。目前，整个对象已保存。

这怎么办？

Answer 1

在{ this.renderComments(this.props.gallery_image.comments) }组件中，

在自动完成的onChange中使用setFieldValue
使用FormikAutocomplete中的gender_name_long显示getOptionLabel，Male
使用Female中的gender_name_short来使用getOptionSelected或M

最后，提交之后，您将看到F / M而不是F

Working demo

Male/Female

使用Material UI的自动完成功能（使用Formik）在下拉菜单中显示不同的值，但在Formik状态下设置不同的值

1 个答案: