在React Typescript和add onClick事件中创建自定义按钮

import React, { MouseEvent } from 'react';

type ButtonProps = {
  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
  text: string;
};

const Button: React.FC<ButtonProps> = ({ onClick, text }) => {
  return (
    <button onClick={onClick}>{text}</button>
  );
};

export default Button;

import React from 'react';
import Button from './Button';

const App: React.FC = () => {
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <Button onClick={handleClick} text="Click me" />
    </div>
  );
};

export default App;