在 MUI v5 中未定义自动完成的默认值答案

【问题标题】：Default value of Autocomplete is undefined in MUI v5在 MUI v5 中未定义自动完成的默认值
【发布时间】：2021-12-19 17:45:39
【问题描述】：

我在 MUI v5 的 Autocomplete 组件中设置了 defaultValue 属性，但值始终为 undefined。

摘自我的代码

const cars = [
  { label: "BMW", code: "Volkswagen" },
  { label: "Benz", code: "Mercedes" }
];

...

 const formik = useFormik({
    initialValues: {
      car: ""
    },
    onSubmit: (values) => {}
  });

...
      <Autocomplete
        id="autocomplete"
        options={cars}
        getOptionLabel={(option) => `${option.code} - ${option.label}`}
        renderOption={(props, option) => (
          <Box component="li" {...props}>
            {option.code} - {option.label}
          </Box>
        )}
        defaultValue={`${cars[0].code} - ${cars[0].label}`}
        onChange={(e, value) => {
          formik.setFieldValue("car", `${value.code} - ${value.name}`);
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            id="textField"
            name="cars"
            label="Cars"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            inputProps={{
              ...params.inputProps,
              autoComplete: "new-password"
            }}
          />
        )}
      />

我使用CodeSandbox 创建了一个工作示例。有人可以帮忙吗？

【问题讨论】：

标签： javascript reactjs material-ui formik formik-material-ui

【解决方案1】：

你可以使用：

defaultValue={cars[0]}

【讨论】：

【解决方案2】：

您收到了undefined-undefined，因为您已经在此处描述了所选属性的外观：

getOptionLabel={(option) => `${option.code} - ${option.label}`}

因此，您应该将一个可以访问code 和label 值的对象传递给默认选项。更改 defaultValue={cars[0]} 会有所帮助。

Working Demo

【讨论】：