イベントの「型」

TypeScriptではeventにも「型」が要求される。anyでは心許ない...

type Props = {
  onClick: (event: React.MouseEvent<HTMLInputElement>) => void
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
  onkeypress: (event: React.KeyboardEvent<HTMLInputElement>) => void
  onBlur: (event: React.FocusEvent<HTMLInputElement>) => void
  onFocus: (event: React.FocusEvent<HTMLInputElement>) => void
  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
  onClickDiv: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
}

使い方

const onClick = (event: React.MouseEvent<HTMLInputElement>) => {
    //処理
  };

とか

 const SubmitTodoHandler = (event: React.FormEvent) => {
        event.preventDefault();
        const enterdText = textInputRef.current!.value;
        console.log(enterdText);
 }

とか。

参考URL:

https://betterprogramming.pub/react-and-typescript-basic-form-event-types-891459e16f12