在自定义输入元素上使用带有打字稿的 useRef

Question

我在使用 typescript 在 input 上使用 useRef 时遇到了困难。我已经检查了很多链接，例如，但我仍然遇到同样的错误。

const MainHeader: React.FC = () => {

const InputStyled = styled(Input)`
  // some basic css
`;

const searchElement = useRef<HTMLInputElement>(null);

return (
  <>
    <InputStyled full ref={searchElement} type="search" />
  </>
);
}

我的 Input 组件：

export type SearchFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
  full?: boolean;
  medium?: boolean;
  light?: boolean;
};

const SearchField = styled.input<SearchFieldProps>`
  // css rules here
`;

const Input: React.FC<SearchFieldProps> = (props) => <SearchField {...props} />;

export default Input;

我想我在这里没有做任何异国情调的事情，但它 returns :

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<PropsWithChildren<SearchFieldProps>, "form" | "slot" | "style" | "title" | "pattern" | "type" | "name" | "defaultChecked" | ... 279 more ... | "light"> & Partial<...>, "form" | ... 286 more ... | "light"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ ref: RefObject<HTMLInputElement>; full: true; placeholder: string | undefined; type: string; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<PropsWithChildren<SearchFieldProps>, "form" | "slot" | "style" | "title" | "pattern" | ... 282 more ... | "light"> & Partial<...>, "form" | ... 286 more ... | "light"> & { ...; } & { ...; }'.
      Property 'ref' does not exist on type 'IntrinsicAttributes & Pick<Pick<PropsWithChildren<SearchFieldProps>, "form" | "slot" | "style" | "title" | "pattern" | ... 282 more ... | "light"> & Partial<...>, "form" | ... 286 more ... | "light"> & { ...; } & { ...; }'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<FC<SearchFieldProps>, any, {}, never, FC<SearchFieldProps>>): ReactElement<...>', gave the following error.
    Type '{ ref: RefObject<HTMLInputElement>; full: true; placeholder: string | undefined; type: string; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<PropsWithChildren<SearchFieldProps>, "form" | "slot" | "style" | "title" | "pattern" | ... 282 more ... | "light"> & Partial<...>, "form" | ... 286 more ... | "light"> & { ...; } & { ...; }'.
      Property 'ref' does not exist on type 'IntrinsicAttributes & Pick<Pick<PropsWithChildren<SearchFieldProps>, "form" | "slot" | "style" | "title" | "pattern" | ... 282 more ... | "light"> & Partial<...>, "form" | ... 286 more ... | "light"> & { ...; } & { ...; }'.

欢迎任何 idea/advice ！

谢谢

Answer 1

您需要为您的用例使用 forwardRef。您的输入组件应该如下所示。

import React from "react";
import styled from "styled-components";

export type SearchFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
  full?: boolean;
  medium?: boolean;
  light?: boolean;
 
};

const SearchField = styled.input<SearchFieldProps>`
  // css rules here
`;

const Input = React.forwardRef<HTMLInputElement>((props, ref) => (
  <SearchField {...props} ref={ref} />
));

export default Input;

第二个解决方案

import React, { FC } from "react";
import styled from "styled-components";

export type SearchFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
  full?: boolean;
  medium?: boolean;
  light?: boolean;
  ref?: React.ForwardedRef<HTMLInputElement>;
};

const SearchField = styled.input<SearchFieldProps>`
  // css rules here
`;

const Input: FC<SearchFieldProps> = React.forwardRef((props, ref) => (
  <SearchField {...props} ref={ref} />
));

export default Input;

在自定义输入元素上使用带有打字稿的 useRef

useRef with typescript on custom input element

typescript

reactjs

use-ref