reactjs - react-bootstrap-typeahead TypeScript- Ref - getInstance არ არსებობს

მიყენებ react-bootstrap-typeahead TypeScript-ში, დავამატე ტიპები @types/react-bootstrap-typeahead

ჩემს typeahead-ში React ფუნქციური კომპონენტიდან, ვცდები მივწვდე typeahead ref-ს და გამოვიძახო კომპონენტის საჯარო მეთოდები, როგორც აქაა მოცემული

იმპორტირება { Typeahead } 'react-bootstrap-typeahead'-დან;

const typeahead = React.createRef();

<Typeahead
ref={(ref) => typeahead = ref}
id="basic-typeahead-single"
filterBy={['dialCode', 'name']}
inputProps={{
    className: 'attrib',
}}
labelKey={(option: any) => `${option.name}`}
onChange={(selected: any) => {
    console.log(selected);
}}
renderMenuItemChildren={(option) => (
    <div>
        <div>{option.name}   {option.section}</div>
    </div>
)}
options={employeeList}
selected={state.internationalization}>
</Typeahead>
<span className="arrow" onClick={() => {
    const instance = typeahead.getInstance();
    console.log("instance", instance);
    instance.clear();
    instance.focus();
}}><img src="/arrow.svg" /></span> 

ამოაგდებს შეცდომას - თვისება 'getInstance' არ არსებობს ტიპზე 'RefObject'

ასე რომ, ref-ის შექმნის დროს, ვცადე: const typeahead=React.createRef<Typeahead>(); მაგრამ ჩანს, თითქოს რაღაც აკლია typescript-ისთვის

პასუხი #1

მოსანიშნი typeahead, რომელიც თქვენ შექმენით createRef-დან, არის RefObject თვისებით current, რომელიც გულისხმობს თქვენს კომპონენტს.

როდესაც თქვენ ქმნით ref-ს, თქვენ უნდა მიუთითოთ კომპონენტის ტიპი გენერიკის გამოყენებით. როგორც დაინახეთ, Typeahead კლასი თვითონ არის გენერიკი, მაგრამ გენერიკი ტიპი არაფერს ნიშნავს იმისთვის, რაც თქვენ გინდათ გააკეთოთ, ამიტომ შეგიძლიათ გამოიყენოთ any, რათა განაცხადოთ, რომ ეს არის ref Typeahead კომპონენტზე ნებისმიერი ტიპის მონაცემით.

const typeahead = React.createRef<Typeahead<any>>();

ჩვეულებრივ callback რეფერენსების ნაცვლად, ჩვენ ვიყენებთ ახალ createRef სინტაქსს, როდესაც რეფერს კომპონენტში გადასცემთ, თქვენ უბრალოდ მთლიანი რეფის ობიექტს გადასცემთ.

<Typeahead ref={typeahead} ... />

ინსტანციაზე წვდომისთვის, შეხედეთ ref-ის .current თვისებას, რომელიც არის ან null, ან Typeahead<any>.

const instance = typeahead.current;

მაგრამ რაც შეეხება მეთოდების გამოძახებას, თქვენ მაინც მიიღებთ შეცდომას. ნებისმიერ მიზეზით, ეს საჯარო მეთოდები, რომლებიც კლასზე არსებობენ, არ არის დოკუმენტირებული ტიპების განსაზღვრებში, ამიტომ TypeScript მათ არ იცნობს.

შეგეძლება ეს აღნუსხო ნებისმიერი ტიპის მფლობელთან ან თავად გამოასწორო @types/react-bootstrap-typeahead პაკეტი, რადგან ჩანს, რომ ეს არის გამოტოვება.

თუმცა თქვენ ასევე შეგიძლიათ გააფართოვოთ ტიპები თქვენი საკუთარი ტიპებით.

declare module "react-bootstrap-typeahead" {
    interface Typeahead<T extends TypeaheadModel> extends React.Component<TypeaheadProps<T>> {
        clear(): void;
        focus(): void;
    }
}

თქვენ უნდა დარწმუნდეთ, რომ typeahead არ არის null სანამ რომელიმე მეთოდის კოლის გაკეთებამდე. ყველაზე სარტყელოვანი გზა ეს არის ოფციონალური ჯაჭვური ოპერატორის ?. გამოყენება

const instance = typeahead.current;
instance?.clear();
instance?.focus();

TypeScript-ის ვარჯიშის ბლოკის ლინკი

პასუხი #2

react-bootstrap-typeahead-ს აქვს TypeaheadRef ტიპებში @types/react-bootstrap-typeahead, უბრალოდ გამოიყენეთ ის

import { AsyncTypeahead, TypeaheadRef } from 'react-bootstrap-typeahead';
...
const typeaheadRef = React.createRef<TypeaheadRef>();