react-bootstrap-typeahead TypeScript-参考-getInstance不存在

问题描述

我正在使用react-bootstrap-typeahead打字稿，并从@types/react-bootstrap-typeahead添加了类型

在我从react功能组件进行提前输入时，我正在尝试访问预输入ref并调用该组件的公共方法，如here

从'react-bootstrap-typeahead'导入{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> 

抛出错误-类型'RefObject'不存在属性'getInstance'

因此在创建引用时，我尝试了：const typeahead = React.createRef<Typeahead>(); 但是似乎打字稿缺少一些东西

解决方法

您从typeahead创建的变量createRef是具有属性RefObject的{​​{1}}，该属性引用了您的组件。

创建引用时，需要使用泛型指定组件类型。如您所见，current类本身是泛型的，但是泛型类型与您尝试执行的操作无关紧要，因此您可以使用Typeahead来表示它是对{的引用{1}}个组件，包含任何类型的数据。

any

由于我们使用的是新的Typeahead语法，而不是旧的回调引用，所以当您将ref传递给组件时，您只需传递整个ref对象。

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

要访问该实例，请查看引用的createRef属性，该属性为<Typeahead ref={typeahead} ... /> 或.current。

null

但是关于调用方法，您仍然会遇到错误。无论出于何种原因，这些exist on the class的公共方法都没有记录in the type definitions，因此打字稿不知道它们。

您可能想将其与任何类型维护者联系起来，或者自己编辑Typeahead<any>软件包，因为这似乎是一种疏忽。

但是您也可以使用自己的类型来扩展类型。

const instance = typeahead.current;

在调用任何方法之前，您需要确保@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

Typescript Playground Link