Дизайн муравья - автозаполнение не должно показывать значение - PullRequest
Новая
       143

Дизайн муравья - автозаполнение не должно показывать значение

0 голосов
/ 05 августа 2020

Мне нужна помощь в очистке заполнителя автозаполнения после того, как пользователь выбирает из раскрывающегося списка, или лучше отображать часть метки, а не значение. В настоящее время он показывает значение. Поскольку Value оказывается уникальным идентификатором, мы не хотим, чтобы его видел конечный пользователь. Это 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, находится в этой форме. {value: string, label: 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>
        </>
      );
    };

После того, как пользователь выбирает из раскрывающегося списка, он покидает строку поиска вот так. Это ценность. Я хотел бы либо очистить его, либо показать только подстроку метки, желательно Заголовок метки в этой строке {Заголовок}.

enter image description here

-------------- Update 1------------- This is the error I am getting on

(JSX attribute) onSelect?: ((value: string, option: OptionData | OptionGroupData) => void) | undefined Type '(value: string, options: { key: any;}) => void' is not assignable to type '(value: string, option: OptionData | OptionGroupData) => void'. Types of parameters 'options' and 'option' are incompatible. Type 'OptionData | OptionGroupData' is not assignable to type '{ key: any; }'. Type 'OptionData' is not assignable to type '{ key: any; }'. Property 'key' is optional in type 'OptionData' but required in type '{ key: any; }'.ts(2322) generate.d.ts(80, 5): The expected type comes from property 'onSelect' which is declared here on type 'IntrinsicAttributes & AutoCompleteProps & RefAttributes

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

  return (

Posting screenshot of the error. enter image description here

------Update 2 enter image description here

введите описание изображения здесь

1 Ответ

1 голос
/ 05 августа 2020

Если бы это был 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);
};

Таким образом вы отображаете правильное значение для пользователя, а также можете получить доступ к идентификатору, когда пользователь его выбирает.

...