reactjs - Ant Design- autokomplettering behöver inte visa värde

Jag behöver lite hjälp med antingen att rensa automatiska kompletteringsplatshållaren efter att användaren valt från rullgardinslistan eller bättre visa en del av etiketten istället för värdet. För närvarande visas Värde. Eftersom Värde visar sig vara ett unikt ID vill vi inte att det ska ses av slutanvändaren. Detta är URL:en för exemplet jag följer https://ant.design/components/auto-complete/

Här är min kod

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;

Objektet som kommer tillbaka från searchResults är i detta format. { value: string, label: JSX.Element }

Och det är så återgången formas

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>
        </>
      );
    };

Efter att användaren väljer från rullgardinsmenyn, lämnar det sökfältet så här. Detta är värdet. Jag skulle vilja antingen rensa det eller bara visa en delsträng av etiketten, helst etikettens titel på denna rad {Title}.

-------------- Uppdatering 1------------- Detta är felet jag får på <AutoComplete onSelect={onSelect} Line

(JSX-attribut) onSelect?: ((value: string, option: OptionData | OptionGroupData) => void) | undefined Typen '(value: string, options: { key: any;}) => void' kan inte tilldelas typen '(value: string, option: OptionData | OptionGroupData) => void'. Typerna för parametrarna 'options' och 'option' är inkompatibla. Typen 'OptionData | OptionGroupData' kan inte tilldelas typen '{ key: any; }'. Typen 'OptionData' kan inte tilldelas typen '{ key: any; }'. Egenskapen 'key' är valfri i typen 'OptionData' men obligatorisk i typen '{ key: any; }'.ts(2322) generate.d.ts(80, 5): Den förväntade typen kommer från egenskapen 'onSelect' som deklareras här på typen '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}
    >

Lägger upp skärmdump av felet.

------Uppdatering 2

Svar #1

Om det var en select kunde du använda optionLabelProp för att ändra den visade egenskapen. (länk)

Men i autofullständig kan du inte ändra den visade egenskapen. Men, du kan anpassa det med det. Byt value: id till key: id och sätt värdet till Title.

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

då kan du komma åt nyckeln (id:t) i onSelect så här:

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

På detta sätt visar du rätt värde för användaren, och du kan också komma åt id:t när användaren väljer det.

Relaterade artiklar

• reactjs - Ant design flera val accepterar inte array som standardvärde
• angular - Hur visar man mer än ett objekt per sida med ant design (NG-Zorro) karusell?
• reactjs - Jag vill verifiera angivet lösenord med hjälp av react och ant.design (antd)
• reactjs - Ant design sortera tabellkod fungerar inte på react typescript
• reactjs - Hämta Base64-sträng från Ant Design Multi Upload-lista
• reactjs - Hur man korrekt validerar och skickar om formuläret är giltigt med ant design-formulär med typescript
• javascript - Begränsa teckeninmatning i ant design
• reactjs - Ant.design upptäcker inte anpassad inmatningskomponent i Form.Item React
• reactjs - Webpack kan inte lösa ant design-moduler
• reactjs - Ant Design hur hanterar man Form.List och får tillgång till värden från den underliggande datastrukturen?
• javascript - Ant Design Form Anpassad Validator
• reactjs - vad är props typ med Typescript när jag anpassar ant-design formkontroll
• reactjs - Hur importerar jag detta Ant Design TypeScript-gränssnitt?
• reactjs - Ant design onFinish-funktion med typescript; Typen &#39;(values: FormData) =&gt; void&#39; kan inte tilldelas typen &#39;(values: unknown) =&gt; void&#39;
• reactjs - Typescript-fel på ant design version 3.0 form

---