代码之家 › 专栏 › 技术社区 › Kruupös

在文本输入旁边使用UseImperialiveHandle时出现Typescript错误

useimperativehandle hook react-native typescript

0

Kruupös · 技术社区 · 4 年前

我正在努力改变信仰 ReactNative official example 对于 useImperativeHandle 用打字稿

起初的 :

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

用打字稿 :

import React, { ReactElement, Ref, useRef, useImperativeHandle, forwardRef } from "react";
import { TextInput } from "react-native";

interface FancyInputProps {
  name: string;
}

const FancyInput = (props: FancyInputProps, ref: Ref<TextInput>): ReactElement => {
  const inputRef = useRef<TextInput>(null);
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));
  return <input ref={inputRef} />;
};

export default forwardRef(FancyInput);

但是 focus 由my IDE突出显示,并显示以下错误消息:

键入“{focus:()=>void;}”中缺少以下属性键入“文本输入”:isFocused、clear、measure、measureInWindow和18 更多

因为 TextInput 确实有其他属性,但我只想添加一个( 集中 ),不重写所有其他属性。

我有一种感觉,我不是那么远,任何帮助将非常感谢!

0 回复 | 直到 4 年前

1

0

Kruupös 4 年前

感谢@ABOS指出 Partial 打字

最终解决方案是:

import React, { ReactElement, Ref, useRef, useImperativeHandle, forwardRef } from "react";
import { TextInput } from "react-native";

interface FrancyInputProps {
  name: string;
}

const FancyInput = (props: FrancyInputProps, ref: Ref<Partial<TextInput>>): ReactElement => {
  const inputRef = useRef<TextInput>(null);
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef?.current?.focus();
    },
  }));
  return <input ref={inputRef} />;
};

export default forwardRef(FancyInput);