MUI 5 自动完成选择对象的属性作为值答案

【问题标题】：MUI 5 Autocomplete choose attribute of object as valueMUI 5 自动完成选择对象的属性作为值
【发布时间】：2022-12-25 21:11:43
【问题描述】：

我的选择看起来像这样

const options = [
  {
    "VaccinationType": "Sample"
  },
  {
    "VaccinationType": "Another Sample"
  }
]

代码：

const [vacType, setVacType] = useState('');

<Autocomplete
    value={vacType}
    onChange={(e, value) => {
        console.log(value);
        setVacType(value);
    }}
    options={options}
    getOptionLabel={(option) => option.VaccinationType}
    isOptionEqualToValue={(option, value) => option.VaccinationType === value.VaccinationType}
    renderInput={(params) => (
            <TextField
                {...params}
                variant="outlined"
                size="small"
            />
    )}
/>

我尝试记录我的值，它仍然输出对象 { VaccinationType: "Sample" }。我希望它只输出"Sample"

在 MUI 4 中我使用这个getOptionSelected={(option, value) => option?.VaccinationType === value?.VaccinationType}

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

自动完成选项关心您放置的数组项。根据您的代码，每个项目都具有所有对象值。我寻找一种方法，但我做不到。

您可能已经想到了一种方法；

您可以编辑选项参数，如options={options.map(o => o.VaccinationType)}并删除疫苗类型getOptionLabel 和 isOptionEqualToValue 上的键

<Autocomplete
    value={vacType}
    onChange={(e, value) => {
      console.log(value);
      setVacType(value);
  }}
    options={options.map(o => o.VaccinationType)}
    getOptionLabel={(option) => option}
    isOptionEqualToValue={(option, value) =>
      option === value
    }
    renderInput={(params) => (
      <TextField {...params} variant="outlined" size="small" />
    )}
  />

【讨论】：

我正在避免映射，因为我的选项将来自我无法控制的数组大小的 api。但是当我找不到一个时，我会保留这个答案

【解决方案2】：

所以我认为你忘记为 MUI 自动完成使用 onInputChange 和 InputValue 属性，根据https://mui.com/material-ui/react-autocomplete/，在这种情况下需要这些属性你可以在这里阅读更多https://mui.com/material-ui/api/autocomplete/所以请检查这个适合我的解决方案：

const [vacType, setVacType] = useState<any>('Sample')
const [inputValue, setInputValue] = useState('Sample')
const options: any[] = [
    {
        VaccinationType: 'Sample'
    },
    {
        VaccinationType: 'Another Sample'
    }
]

<Autocomplete
    value={vacType} //here u set default Value and change whenever it changes a list choice
    inputValue={inputValue} //here u set default Input and change whenever it changes by typing
    onChange={(event: any, newValue: any | null) => {
        setVacType(newValue)
    }}
    onInputChange={(event, newInputValue) => {
        setInputValue(newInputValue)
    }} // handles typing
    options={options}
    getOptionLabel={(option: { VaccinationType: string }) => {
        return option?.VaccinationType
    }}
    isOptionEqualToValue={(option, value) =>
        option?.VaccinationType === value?.VaccinationType
    }
    renderInput={params => (
        <TextField {...params} variant="outlined" size="small" />
    )}
/>

希望能帮助到你！

【讨论】：

【解决方案3】：

我不知道你为什么要那样做！,
您可以在任何地方简单地使用 value 对象，并使用对象的任何键，获取 value 对象，然后使用 value.VaccinationType。

但是，如果你想这样做：

<Autocomplete
    {...props}
    value={options.find(op => op.VaccinationType === vacType)}
    onChange={(e, value) => {
        console.log(value);                   //Result: { "VaccinationType": "Sample" }
        setVacType(value.VaccinationType);    // <==== Here, add `.VaccinationType`
    }}
/>

【讨论】：

这会因为这个value={vacType}而中断。我将它设置为受控组件。原因可能是因为 Autocomplete 期望一个对象作为选定值。虽然这在 MUI 4 中很容易修复，即 getOptionSelected prop。它在 MUI 5 中被重命名为 isOptionEqualToValue 但现在它无法正常工作
我更新了答案，将值更改为 value={options.find(op => op.VaccinationType === vacType)} 。