MUI 5 自动完成选择属性 object 作为值

Question

我的选择看起来像这样

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"
            />
    )}
/>

我尝试记录我的值，它仍然输出 object { VaccinationType: "Sample" } 。 我只想要 output "Sample"

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

Answer 1

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

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

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

<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" />
    )}
  />

Answer 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" />
    )}
/>

希望能帮助到你。 还要用 console.log 回答你的问题

你的代码：

onChange={(e, value) => {
    console.log(value);
    setVacType(value);
}}

交换到：

onChange={(event: any, newValue: any | null) => {
    console.log('newValue')
    console.log(newValue)
    setVacType(newValue)
}}

给出 object 但你在此自动完成提供对象然后设置值在对象中所以你只需要添加 console.log(newValue.VaccinationType) 而不是 setVacType(newValue) 并且自动完成将记住最后的选择

Answer 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`
    }}
/>