Ant Design- autocomplete 不需要显示值

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 返回的

Object 就是这种形式。 { 值：字符串，标签：JSX.Element }

这就是 return 的形成方式

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------------ 这是我在上遇到的错误

(JSX 属性) onSelect?: ((value: string, option: OptionData | OptionGroupData) => void) |不明确的类型 '(value: string, options: { key: any;}) => void' 不可分配给类型 '(value: string, option: OptionData | OptionGroupData) => void'。参数类型 'options' 和 'option' 不兼容。类型 'OptionData | 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来改变显示的道具。 (link)

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

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

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

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

这样您可以向用户显示正确的值，并且您还可以在用户选择它时访问该 ID。

Ant Design- autocomplete 不需要显示值

Ant Design- autocomplete need to not show value

reactjs

typescript

antd

ant-design-pro