reactjs - React Typescript: Skicka funktion som props med argument

Så detta problem har hängt över mig de senaste dagarna och jag svär att jag har tittat på nästan alla för att försöka lösa det. Jag behöver helt enkelt anropa en funktion som skickas från en föräldrakomponent onClick inuti en barnkomponent. Funktionen tar emot parametrar, och det är i parametrarna felet ligger.

Jag är medveten om att jag förmodligen skulle kunna exportera och importera funktionen, men detta är något jag enkelt skulle kunna göra i vanlig JavaScript och React, så jag är säker på att det måste vara möjligt. Jag är bara inte den mest kompetenta med TypeScript för tillfället.

Föräldrakomponent

// Promise Function I am passing to the child
  function parentFunction(email: string, password: string, userName: string) {
    return promiseFunction(email, password)
      .then((result) => {
        return updateProfile({
          displayName: userName,
        })
      })
      .catch((error) => {
        console.log(error);
      });
  }

// Passing to child component
return (
    <div>
        <ChildComponent parentFunction = {parentFunction}/>
    </div>
)

Barnkomponent

Så eftersom det är en onClick-funktion vet jag att jag behöver hantera event-funktionen.

type Props = {
    parentFunction: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
}

export default function childComponent(props: Props){
    return(
        <button onClick={props.parentFunction}></button>
    )
}

Typproblem

Nu, om det inte fanns några parametrar skulle det inte finnas några problem och funktionen skulle fungera bra vid klick. Men.

Funktionen är av typen

parentFunction(email: string, password: string, userName: string): Promise<void>

onClick-funktionen är av typen

MouseEventHandler<HTMLButtonElement>

Jag har försökt att lägga till parametrarna i Props-typfunktionen men det löser bara problemen med funktionstypen, onClick-typproblemet finns fortfarande kvar och vice versa.

Mitt försök att lösa problemet

type Props = {
  parentFunction: (
    email: string,
    password: string,
    userName: string
    event?: React.MouseEvent<HTMLButtonElement>
  ) => Promise<void>;
}

Håller jag på med det här på fel sätt? Missar jag helt något viktigt för att skicka funktioner i TypeScript? All hjälp skulle uppskattas mycket.

Svar #1

Du kan prova så här

För att lägga till händelsehanterare för barnkomponent

export default function childComponent(props: Props){
    return(
        <button onClick={(e) => props.parentFunction(e)}></button>
    )
}

Hanterartypen kan vara som nedan

type Props = {
   parentFunction: (event: MouseEvent<HTMLButtonElement>: e, email?: string, password?: string, userName?: string) => Promise<void>;
}

Faktisk händelsehanterare

  const parentFunction = (event: MouseEvent<HTMLButtonElement>: e, email?: string, password?: string, userName?: string) => ...

Relaterade artiklar