MUI 自动完成 - 选择一个选项时，label 显示值而不是选择的 label

Question

我有一个受控的 MUI 自动完成功能。 我正在使用带有 Material UI Autocomplete的 react-hook-form 。

我有一个选项列表，它是通过自动完成options道具呈现的。

选择一个选项时，我希望该值是所选选项的id ，label 应该显示title 。

const options = [{id: 1, title: 'First'}, {id: 2, title: 'Second}];

 <ControlledAutoComplete
   control={control}
   name="Id"
   options={options}
   getOptionLabel={(option) => option?.title || option}
   label="Select Students"
   defaultValue={null}
 />

使用 controller 自动完成，

const ControlledAutoComplete = ({ options = [], label, getOptionLabel, control, defaultValue, name, renderOption }) => (
  <Controller
    name={name}
    control={control}
    defaultValue={defaultValue}
    onChange={([, data]) => data}
    render={({ field, fieldState }) => (
      <Autocomplete
        options={options}
        getOptionLabel={getOptionLabel}
        renderInput={(params) => (
          <TextField
            {...params}
            label={label}
            variant="standard"
            error={!!fieldState.error}
            helperText={fieldState.error?.message}
            fullWidth
          />
        )}
        {...field}
        isOptionEqualToValue={(option, value) => value === undefined || value === '' || option?.id === value}
        onChange={(_, data) => field.onChange(data.id)}
      />
    )}
  />
);

选择一个选项后，输入文本显示undefined 。

同样的问题发生在下面的例子中，它返回data.code而不是onChange()中的data 。

例子

Answer 1

这是一个常见的错误，查看您提供的示例，您将data.code设置为Autocomplete组件中的新值。 在查看defaultValue时，您将其设置为 object 以及代码label和phone 。

您应该更改Autocomplete中的onChange以设置data而不是data.code

<Autocomplete
  ...
  onChange={(e, data) => onChange(data)}
  ...
/>

完整 controller

<Controller
  render={({ onChange, ...props }) => (
    <Autocomplete
      options={countries}
      getOptionLabel={(option) => {
        return option?.label || option;
      }}
      renderInput={(params) => (
        <TextField {...params} label="Choose a country" variant="outlined" />
      )}
      onChange={(e, data) => onChange(data)}
      {...props}
    />
  )}
  onChange={([, data]) => data}
  defaultValue={{ code: "AF", label: "Afghanistan", phone: "93" }}
  name="country"
  control={control}
/>