Как получить скрытое значение из опции автозаполнения пользовательского интерфейса?

Question

Я создаю панель поиска, которая извлекает имена из нашей базы данных, но, поскольку у нескольких пользователей может быть одно и то же имя (мы различаем guish по полю uid), я хочу, чтобы щелкнув по одной из этих опций получит мне соответствующее поле uid, чтобы я мог перенаправить страницу на страницу, связанную с их uid, et c.

Вот соответствующий фрагмент кода:

`

const Search = (props) => {

// profiles should be an array (of Profile objects)
// Profile objects have format {uid: , name:, location: , img: , occupation: }
const [profiles, setProfiles] = useState([]);
const classes = props.classes;

const handleChange = async (event) => {
    const name = event.target.value;
    if (name.length > 0) {
        const result = await searchForProfiles(name);
        setProfiles(result);
        if (result.length > 0) {
            console.trace(result);
        }
    }

};
return (
    <div className={classes.search}>
        <div className={classes.searchIcon}>
            <SearchIcon />
        </div>
        <Autocomplete
            freeSolo
            id="free-solo-2-demo"
            disableClearable
            options={profiles}
            getOptionLabel={option => option.name}
            renderInput={params => (
                <InputBase
                    {...params}
                    placeholder="Search…"
                    onKeyPress={event => {
                        handleChange(event);
                    }}
                    classes={{
                        root: classes.inputRoot,
                        input: classes.inputInput,
                    }}
                    InputProps={{ ...params.InputProps, type: 'search' }}
                />
            )}
        />
    </div>

)
};

Answer 1

В соответствии с API Docs обратный вызов onChange обеспечивает event и value. И значением будет объект, предоставленный свойству options. Таким образом, чтобы захватить объект полного профиля, который выбирается при изменении значения Autocomplete, вы должны быть в состоянии сделать следующее:

const handleSelected(event, value){
  const uid = value.uid;   //value is the profile object
  //...do what you want with the UID
}

Затем в вашем Autocomplete просто обработайте событие onChange .

<Autocomplete options={profiles} onChange={handleSelect} ...otherProps />