reactjs - react typescript : Pass function as props with arguments

Question

所以过去几天这个问题一直困扰着我，我发誓我看过几乎所有试图解决它的人。我只需要在子组件内调用从父组件 onClick 传递的函数。函数接收参数，参数部分是错误所在。

我知道我可能可以导出和导入该函数，但这是我可以在常规 JavaScript 中轻松完成并使用react的事情，所以我确信它一定是可行的。目前我还不是最擅长使用 TypeScript 的人。

父组件

// 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>
)

子组件

因为它是一个 onClick 函数，所以我知道我需要处理 event 函数。

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

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

类型问题

现在，如果没有参数，就不会有问题，并且该函数可以在单击时正常运行。然而。

函数类型

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

onClick函数是类型

MouseEventHandler<HTMLButtonElement>

我试过在Props类型的函数中添加参数，但这只能满足函数类型的问题，onClick类型的问题仍然存在，反之亦然。

我尝试解决这个问题

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

我做错了吗？我是否完全遗漏了一些对于在 typescript 中传递函数至关重要的东西？任何帮助将不胜感激。

Answer 1

你可以这样试试

为子组件添加事件处理器

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

处理程序类型可能如下所示

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

实际的事件处理程序

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