带有包含对象数组（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 propsonChange公开的事件，该事件将返回所选元素。然后该 id 应该在您的回调中可用。val.idgetInput