在 onSelect 處從 material-ui 自動完成檢索條目的鍵，而不是值

Question

我正在使用帶有 Material-ui 的 React 和此處記錄的自動完成組件 - https://material-ui.com/components/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>

使用 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>
    );
}

在這里，我將 uuid 設置為每個選擇的鍵。

我的最終目標是能夠進行選擇並檢索 uuid 而不是值本身。

雖然我可以使用返回的值來匹配項目列表，但我想確保如果最終有任何重復條目，它不會導致問題。

我的組件完整代碼的鏈接在這里 - https://github.com/theocranmore/bloodbike/blob/master/react_app/src/components/UsersSelect.js#L143

謝謝！

Answer 1

我不知道你為什么需要一個 id，但對於我自己來說，獲得 object 本身就足夠了。

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

Answer 2

您可以檢索整個值，然后訪問所需的密鑰（option.id）：

const options = [
      { id: 0, value: "foo" },
      { id: 1, value: "goo" },
    ];

<Autocomplete
  options={options}
  onChange={(event, option) => {
    console.log(option.id); // 1
  }}
  renderInput={(params) => <TextField {...params} />}
/>;