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

Posted 2023-02-22

【中文标题】Ant Design - 自动完成不需要显示价值

【英文标题】：Ant Design- autocomplete need to not show value

【发布时间】：2020-11-25 02:45:08

【问题描述】：

在用户从下拉列表中选择后清除自动完成占位符或更好地显示标签的一部分而不是值时，我需要一些帮助。目前它的显示价值。因为 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------------- 这是我在 上遇到的错误

(JSX 属性) onSelect?: ((value: string, option: 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”

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

【参考方案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。

【讨论】：

@Sarah 没问题，这是我的完整代码：github.com/ya3ya6/ReactPlay1/blob/stack/src/***_play/… 另请注意，对于此类问题，您应该添加antd 标签，因为它是此问题的主要标签。 ant-design-pro 只有 49 个观察者，但 antd 有 468 个观察者。使用不受欢迎的标签会降低获得答案的机会。

@Sarah 没问题。我不擅长typescript。 import OptionData, OptionGroupData from "rc-select/lib/interface"; 有效吗？

@Sarah 这完全是另一个问题（control + space 不建议使用打字稿包。）。我想这是因为我安装了一些扩展，比如visual tudio intellisense。你可以问另一个问题，因为我不擅长typescript。

明白了！我会查查的。非常感谢您帮助我解决这个问题。真的很感激。如果我能竖起 100 个大拇指:)

@Sarah 不确定，为什么不为它发布一个新问题，希望它能得到回答，因为它似乎是一个单独的问题。