按钮传递Onclick事件

Question

I have a button.tsx with a onClick property.

import * as React from 'react';
interface Props {
 className?: string;
 text: string;
 onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
 type?: string;
}
const submitButton = (event: React.MouseEvent<HTMLButtonElement> , props: 
Props) => {
 event.preventDefault();
 props.onClick(event);
};
export const ButtonComponent = (props: Props) => {
 return (
  <button
   className={props.className}
   type={props.type}
   onClick={submitButton(event, props)}
  >
  {props.text}
 </button>
 );
};

How can I pass the event to submitButton function?

Now I have this error:

Argument of type 'Event' is not assignable to parameter of type 'MouseEvent'. Property 'altKey' is missing in type 'Event'.

Answer 1

You are calling submitButton immediately during the render rather than passing the function as a handler, therefore event does not exist and you are passing nothing (the return type of submitButton to onClick)

Pass as a function to onClick instead

<button className={props.className}
        type={props.type}
        onClick={event => submitButton(event, props)}>
  {props.text}
</button>