как 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}

Я просто не могу понять, основываясь на сообщении об ошибке, что здесь не так. Для меня это слишком сложно. Может кто-нибудь помочь в этом примере?

0 ответов

Другие вопросы по тегам