帶有包含對象數組（ID 和標簽）的選項的 Material UI 自動完成實現

Question

我正在為我的項目使用Material UI 自動完成功能。 如官方文檔所示，我的選擇是，

let options = [
   { id: "507f191e810c19729de860ea", label: "London" },
   { id: "u07f1u1e810c19729de560ty", label: "Singapore" },
   { id: "lo7f19re510c19729de8r090", label: "Dhaka" },
]

然后，我使用Autocomplete作為，

import React, { Component, Fragment, useState } from "react"
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import options from "/options"

function SelectLocation(props){
    const [ input, setInput ] = useState("");

    const getInput = (event,val) => {
        setInput(val);
    }

    return (
        <Autocomplete
            value={input}
            options={options}
            renderOption={option => <Fragment>{option.label}</Fragment>}}
            getOptionLabel={option => option.label}
            renderInput={params => {
                return (
                    <TextField 
                        {...params} 
                        label={props.label} 
                        variant="outlined" 
                        fullWidth
                    />
                )
            }}
            onInputChange={getInput}
        />
    )
}

現在我的用戶界面（選項列表）顯示了我的預期。 問題是，我將London或Singapore作為我的input值，但我想從此輸入中獲取選定的對象或ID 。

我已經徹底遵循了他們的文檔，但找不到方法！

Answer 1

onInputChange使用輸入的實際內容觸發。

您可能希望使用input props公開的onChange事件，該事件將返回所選元素。 該 id 應該可以作為val.id在您的getInput回調中使用。