Как мне запустить функцию щелчка с React и Typescript?

Question

Я новичок в React и TypeScript.

Я хочу сделать простую функцию, которая просто запускает console.log(); Я прошел несколько уроков, но на самом деле не понимаю.

Я создал интерфейс как таковой согласно учебнику:

interface ClickHandlerProps {
  onClick; (event: React.SyntheticEvent<Event>, buttonType: string) => void
}

И в функции возврата у меня есть:

<Button
  onClick={(e) => props.onClick(e, "button1")}
>

Но учебный вид на этом заканчивается. Я действительно не знаю, как просто запустить console.log ().

Я знаю, что это немного расплывчато, но кто-нибудь может мне помочь и указать мне правильное направление?

Полный код:

import React from 'react';
import { Button, Grid } from '@material-ui/core';

interface ClickHandlerProps {
  onClick; (event: React.SyntheticEvent<Event>, buttonType: string) => void
}

const ActionButtons = ({ onClick }: EventHandlerProps) => {

  return (
    <>
      <Grid container spacing={3}>
        <Grid item xs={4}>
          <Button onClick={(e) => props.onClick(e, "button1")} >
            Button 1
          </Button>
        </Grid>
        <Grid item xs={4}>
          <Button onClick={(e) => props.onClick(e, "button2")} >
            Button 2
          </Button>
        </Grid>
      </Grid>
    </>
  );
};

export default ActionButtons;

На index.tsx

import ActionButtons from './ActionButtons';
export default ActionButtons;

Answer 1

Теперь вы можете использовать свой компонент ActionButtons следующим образом:

import React, {SyntheticEvent} from 'react';

const MyComponent = (props) => {
  const clickHandler = (evt: SyntheticEvent<Event>, btnType: string) => {
    console.log(`Button clicked: ${btnType}`
  };

  return <ActionButtons onClick={clickHandler}></ActionButtons>
}

export default MyComponent;

Обратите внимание, что вы передаете функцию clickHandler на вход onClick, поэтому любой щелчок внутри ActionButtons вызовет clickHandler.

Кстати, на примере ActionButtons компонента, похоже, есть некоторые ошибки:

const ActionButtons = ({ onClick }: EventHandlerProps) => {
  return (
    <>
      <Grid container spacing={3}>
        <Grid item xs={4}>
          <Button onClick={(e) => onClick(e, "button1")} >
            Button 1
          </Button>
        </Grid>
        <Grid item xs={4}>
          <Button onClick={(e) => onClick(e, "button2")} >
            Button 2
          </Button>
        </Grid>
      </Grid>
    </>
  );
};

export default ActionButtons;

Answer 2

Вы сделали здесь опечатку: вы должны использовать двоеточие, чтобы отделить имя свойства от его типа.

interface ClickHandlerProps {
  onClick: (event: React.SyntheticEvent<Event>, buttonType: string) => void
}