как ForwardRef для обернутого компонента с использованием функционального компонента и машинописного текста
У меня проблема с forwardRef в Typescript в ReactJS.
Моя цель - обернуть загрузочную оболочку FormControl и предоставить на данный момент некоторую простую логику, а затем использовать ее. Я знаю, что FormControl пересылает ссылку на элемент ввода.
Теперь, как я могу переслать ссылку в моем компоненте на эту ссылку, которую пересылает FormControl. Теперь мой код выглядит так:
import React from "react";
import { Form } from 'react-bootstrap';
export type FormSimpleTextProps = {
name: string;
placeholder: string;
value: string;
updated: boolean;
editable: boolean;
onChange: (name: string, newValue: string) => void;
};
export const FormSimpleText = React.forwardRef(
(props: FormSimpleTextProps, ref: React.Ref<HTMLInputElement>) => {
const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
console.log(e);
}
return (
<Form.Control
ref={ref}
name={props.name}
value={props.value}
onChange={onChangeHandler}
className={props.updated ? "selected" : ""}
plaintext={!props.editable}
readOnly={!props.editable}
required
type="text"
placeholder={props.placeholder}
/>
);
}
);
В строке с ref={ref} появляется ошибка:
No overload matches this call.
Overload 1 of 2, '(props: Readonly<ReplaceProps<"input", BsPrefixProps<"input"> & FormControlProps>>): FormControl<"input">', gave the following error.
Type '((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null' is not assignable to type '(string & ((instance: HTMLInputElement | null) => void)) | (string & RefObject<HTMLInputElement>) | (((instance: FormControl<"input"> | null) => void) & ((instance: HTMLInputElement | null) => void)) | ... 4 more ... | undefined'.
Type '(instance: HTMLInputElement | null) => void' is not assignable to type '(string & ((instance: HTMLInputElement | null) => void)) | (string & RefObject<HTMLInputElement>) | (((instance: FormControl<"input"> | null) => void) & ((instance: HTMLInputElement | null) => void)) | ... 4 more ... | undefined'.
Type '(instance: HTMLInputElement | null) => void' is not assignable to type 'string & ((instance: HTMLInputElement | null) => void)'.
Type '(instance: HTMLInputElement | null) => void' is not assignable to type 'string'.
Overload 2 of 2, '(props: ReplaceProps<"input", BsPrefixProps<"input"> & FormControlProps>, context?: any): FormControl<"input">', gave the following error.
Type '((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null' is not assignable to type '(string & ((instance: HTMLInputElement | null) => void)) | (string & RefObject<HTMLInputElement>) | (((instance: FormControl<"input"> | null) => void) & ((instance: HTMLInputElement | null) => void)) | ... 4 more ... | undefined'.
Type '(instance: HTMLInputElement | null) => void' is not assignable to type '(string & ((instance: HTMLInputElement | null) => void)) | (string & RefObject<HTMLInputElement>) | (((instance: FormControl<"input"> | null) => void) & ((instance: HTMLInputElement | null) => void)) | ... 4 more ... | undefined'.
Type '(instance: HTMLInputElement | null) => void' is not assignable to type 'string & ((instance: HTMLInputElement | null) => void)'.
Type '(instance: HTMLInputElement | null) => void' is not assignable to type 'string'. TS2769
20 | return (
21 | <Form.Control
> 22 | ref={ref}
| ^
23 | name={props.name}
24 | value={props.value}
25 | onChange={onChangeHandler}
Я просто не могу понять, основываясь на сообщении об ошибке, что здесь не так. Для меня это слишком сложно. Может кто-нибудь помочь в этом примере?