MUI v5 中未定義自動完成的默認值

Question

我在 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創建了一個工作示例。 有人可以幫忙嗎？

Answer 1

您得到undefined-undefined是因為您已經在此處描述了 selected 屬性的外觀：

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

因此，您應該將一個可以訪問code和label值的對象傳遞給默認選項。 更改defaultValue={cars[0]}會有所幫助。

工作演示

Answer 2

你可以使用：

defaultValue={cars[0]}