Question

我正在为我的项目使用材料界面自动完成。如official documentation所示，我的选择是

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

现在，我的UI（选项列表）正在显示我的预期。 问题是，我得到London的值是Singapore或input，但是我想获取选定的对象或ID从此输入。

我已经完全遵循了他们的文档，但是找不到方法！

Answer 1

输入的实际内容触发了

onInputChange。

您可能想使用input props公开的onChange事件，该事件将返回所选元素。然后，您的val.id回调中的ID应该可以作为getInput来使用。

具有包含对象数组（ID和标签）的选项的实质性UI自动完成实现

1 个答案: