Ant Design-自动完成不需要显示价值

Question

我需要一些帮助来清除用户从下拉列表中选择后的自动完成占位符，或者更好地显示标签的一部分而不是值。目前其显示价值。由于 Value 将成为唯一的 ID，因此我们不希望最终用户看到它。这是我正在关注的示例的 URL https://ant.design/components/auto-complete/

这是我的代码

import React, { useState } from "react";
import { Input, AutoComplete } from "antd";
import { SelectProps } from "antd/es/select";


const SearchBar: React.FC<> = () => {
    const [options, setOptions] = useState<SelectProps<unknown>["options"]>([]);
  
    const handleSearch = async (value: string) => {
      setOptions(
        value ? await searchResults() : []
      );
    };
  
    const onSelect = (value: string) => {
      console.log (value)
    };
return (
    <AutoComplete
          dropdownMatchSelectWidth={300}
          style={{ width: 350 }}
          options={options}
          onSelect={onSelect}
          onSearch={handleSearch}
        >
          <Input.Search
            size="large"
            placeholder="Search By name"
            enterButton
          />
        </AutoComplete>
     );
    };
    export default SearchBar;

从 searchResults 返回的对象就是这种形式。{ 值：字符串，标签：JSX.Element }

这就是回报的形成方式

const searchResults = async () => {
    return {
        value: id,
        label: DisplayElement (query, Title, info),
      };
    }

    const DisplayElement = (query: string, Title: string, info: string) => {
      return (
        <>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
            }}
          >
            <span>
              <a>{Title}</a>
            </span>
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
            }}
          >
            <span>{info}</span>
          </div>
        </>
      );
    };

用户从下拉列表中选择后，它会像这样离开搜索栏。这就是价值。我想清除它或仅显示标签的子字符串，最好是此行 {Title} 上的标签标题。

-------------- 更新 1------------- 这是我在 <AutoComplete onSelect={onSelect} 行上遇到的错误

(JSX 属性) onSelect?: ((值: 字符串, 选项: OptionData | OptionGroupData) => void) | 未定义类型 '(value: string, options: { key: any;}) => void' 不可分配给类型 '(value: string, option: OptionData | OptionGroupData) => void'。参数“options”和“option”的类型不兼容。输入“选项数据| OptionGroupData' 不可分配给类型 '{ key: any; }'。类型“OptionData”不可分配给类型“{ key: any;” }'。属性“key”在“OptionData”类型中是可选的，但在“{ key: any;”类型中是必需的 }'.ts(2322)generate.d.ts(80, 5)：预期类型来自属性“onSelect”，该属性在类型“IntrinsicAttributes & AutoCompleteProps & RefAttributes<Select>”上声明

const onSelect = (value: string, options: { key: any }) => {
    console.log(options.key);
    console.log(value);
    props.parentCallback(options.key);
  };

  return (
    <AutoComplete
      dropdownMatchSelectWidth={300}
      style={{ width: 350 }}
      options={options}
      onSelect={onSelect}  // error on first OnSelect
      onSearch={handleSearch}
    >

发布错误的屏幕截图。

------更新2

Answer 1

如果它是select，您可以用来optionLabelProp更改显示的道具。（关联）

但在自动完成中，您无法更改显示的属性。但是，您可以采用它。更改value: id并将key: id值设置为Title。

const searchResults = async query => {
  return [
    {
      key: id,
      value: Title,
      label: DisplayElement(query, Title, info)
    }
  ];
};

然后你可以像这样访问密钥（id）onSelect：

const onSelect = (value, option) => {
  // you don't want the value, instead you want the key.
  console.log(option.key);
};

这样您就可以向用户显示正确的值，并且当用户选择它时您也可以访问该 id。