Javascript 从onSelect的物料ui自动完成中检索条目的键，而不是值

我正在使用React with Material ui和此处记录的Autocomplete组件-带降档

                <Downshift id="downshift-options">
                {({
                      clearSelection,
                      getInputProps,
                      getItemProps,
                      getLabelProps,
                      getMenuProps,
                      highlightedIndex,
                      inputValue,
                      isOpen,
                      openMenu,
                      selectedItem,
                  }) => {
                    const {onSelect, onBlur, onChange, onFocus, ...inputProps} = getInputProps({
                        onChange: event => {
                            if (event.target.value === '') {
                                clearSelection();
                            }
                        },
                        onSelect: event => {
                            if (event.target.id) {
                                this.props.onSelect(event.target.value);
                            }

                        },
                        onFocus: openMenu,
                        placeholder: 'Type to search',
                    });

                    return (
                        <div className={classes.container}>
                            {renderInput({
                                fullWidth: true,
                                classes,
                                label: "Assigned Rider",
                                InputLabelProps: getLabelProps({shrink: true}),
                                InputProps: {onBlur, onChange, onFocus, onSelect},
                                inputProps,
                            })}

                            <div {...getMenuProps()}>
                                {isOpen ? (
                                    <Paper className={classes.paper} square>
                                        {getSuggestions(this.props.suggestions, inputValue, {showEmpty: true}).map((suggestion, index) =>
                                            renderSuggestion({
                                                suggestion,
                                                index,
                                                itemProps: getItemProps({item: suggestion.label}),
                                                highlightedIndex,
                                                selectedItem,
                                            }),
                                        )}
                                    </Paper>
                                ) : null}
                            </div>
                        </div>
                    );
                }}
            </Downshift>

{({
在选举中，
getInputProps，
getItemProps，
getLabelProps，
GetMenurops，
highlightedIndex，
输入值，
伊索本，
openMenu，
selectedItem，
}) => {
const{onSelect，onBlur，onChange，onFocus，…inputProps}=getInputProps({
onChange:event=>{
如果（event.target.value==''）{
选举（）；
}
},
onSelect:event=>{
if（event.target.id）{
this.props.onSelect（event.target.value）；
}
},
onFocus:openMenu，
占位符：“要搜索的类型”，
});
返回(
{renderInput({
全宽：对，
班级，
标签：“指定骑手”，
InputLabelProps:getLabelProps（{shrink:true}），
InputProps:{onBlur、onChange、onFocus、onSelect}，
输入道具，
})}
{isOpen(
{getSuggestions（this.props.suggestions，inputValue，{showEmpty:true}）.map（（suggestion，index）=>
渲染建议({
建议,，
指数
itemProps:getItemProps（{item:suggestion.label}），
highlightedIndex，
selectedItem，
}),
)}
)：null}
);
}}

使用onSelect，我可以检索选择的值。我希望能够取回钥匙

function renderSuggestion(suggestionProps) {
    const { suggestion, index, itemProps, highlightedIndex, selectedItem } = suggestionProps;
    const isHighlighted = highlightedIndex === index;
    const isSelected = (selectedItem || '').indexOf(suggestion.label) > -1;

    return (
        <MenuItem
            {...itemProps}
            key={suggestion.uuid}
            value={suggestion.uuid}
            selected={isHighlighted}
            component="div"
            style={{
                fontWeight: isSelected ? 500 : 400,
            }}
        >
            {suggestion.label}
        </MenuItem>
    );
}

函数渲染建议（建议道具）{
const{suggestion，index，itemProps，highlightedIndex，selectedItem}=suggestionProps；
const isHighlighted=highlightedIndex==索引；
const isSelected=（selectedItem | |“”）.indexOf（suggestion.label）>-1；
返回(
{建议.标签}
);
}

在这里，我将uuid设置为每个选择的键

我的最终目标是能够进行选择并检索uuid，而不是值本身

虽然我可以使用返回的值来匹配项目列表，但我希望确保如果出现任何重复条目，不会导致问题

此处是指向我的组件完整代码的链接-

---

谢谢大家!

我不知道你为什么需要一个id，但对于我自己来说，获取对象本身就足够了

<Autocomplete .....
    onChange={(event, newValue) => {
        console.log(newValue); //this will give you the selected value dictionary (source)
    }}

{
console.log（newValue）；//这将为您提供所选的值字典（源）
}}

我不知道你为什么需要一个id，但对于我自己来说，获取对象本身就足够了

<Autocomplete .....
    onChange={(event, newValue) => {
        console.log(newValue); //this will give you the selected value dictionary (source)
    }}

{
console.log（newValue）；//这将为您提供所选的值字典（源）
}}

您可以检索整个值，然后访问所需的键（option.id）：

const选项=[
{id:0，值：“foo”}，
{id:1，值：“goo”}，
];
{
console.log（option.id）；//1
}}
renderInput={（参数）=>}
/>;

您可以检索整个值，然后访问所需的键（option.id）：

const选项=[
{id:0，值：“foo”}，
{id:1，值：“goo”}，
];
{
console.log（option.id）；//1
}}
renderInput={（参数）=>}
/>;

虽然这段代码可以解决这个问题，但如何以及为什么解决这个问题将真正有助于提高您的帖子质量，并可能导致更多的投票。请记住，你是在将来回答读者的问题，而不仅仅是现在提问的人。请在回答中添加解释，并说明适用的限制和假设。虽然这段代码可以解决这个问题，但如何以及为什么解决这个问题将真正有助于提高您的帖子质量，并可能导致更多的投票。请记住，你是在将来回答读者的问题，而不仅仅是现在提问的人。请在回答中添加解释，并说明适用的限制和假设。