反应中带有 typescript 的通用类型按钮

Question

Hello guy I am developing a todo app, so I have a text editor and two button with code below

import { useState, Fragment } from "react";
import { Editor } from "react-draft-wysiwyg";
import { convertToRaw, EditorState } from "draft-js";
import draftToHtml from "draftjs-to-html";
import htmlToDraft from "html-to-draftjs";
import Button from "../button/button.component";

interface IEditor {
  onSubmit: (text: string) => void;
  onCancel: () => void;
  contentText: string;
}

const EditorText = ({ onSubmit, onCancel, contentText }: IEditor) => {
  const [content, setContent] = useState(contentText);
  const [editorState, setEditorState] = useState<EditorState>(
    EditorState.createEmpty()
  );

  console.log(content);

  return (
    <Fragment>
      <Editor
        editorState={editorState}
        wrapperClassName="card"
        editorClassName="card-body"
        onEditorStateChange={(newState) => {
          setEditorState(newState);
          setContent(draftToHtml(convertToRaw(newState.getCurrentContent())));
        }}
        toolbar={{
          options: [
            "inline",
            "blockType",
            "fontSize",
            "list",
            "textAlign",
            "history",
            "embedded",
            "emoji",
            "image",
          ],
          inline: { inDropdown: true },
          list: { inDropdown: true },
          textAlign: { inDropdown: true },
          link: { inDropdown: true },
          history: { inDropdown: true },
        }}
      />
      <div>
        <Button onClickHandler={onSubmit} label="Save" /> // error here
        <Button onClickHandler={onCancel} label="Cancel" />
      </div>
    </Fragment>
  );
};

export default EditorText;

I also define a Button component

import { ButtonContainer } from "./button.styles";

interface IButton<T> {
  onClickHandler: (text: T) => void;
  label: string;
}

const Button = ({
  label,
  onClickHandler,
  ...otherProps
}: IButton<Event | string>) => {
  return (
    <ButtonContainer {...otherProps} onClick={onClickHandler}>
      {label}
    </ButtonContainer>
  );
};

export default Button;

ButtonContainer

import styled from "styled-components";

export const ButtonContainer = styled.button`
  box-shadow: inset 0px 1px 0px 0px #97c4fe;
  background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
  background-color: #3d94f6;
  border-radius: 6px;
  border: 1px solid #337fed;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #1570cd;
  &:hover {
    background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
    background-color: #1e62d0;
  }
  &:active {
    position: relative;
    top: 1px;
  }
`;

The error come from this button <Button onClickHandler={onSubmit} label="Save" />

it give me the error which is

Type '(text: string) => void' is not assignable to type '(text: string | Event) => void'.
  Types of parameters 'text' and 'text' are incompatible.
    Type 'string | Event' is not assignable to type 'string'.
      Type 'Event' is not assignable to type 'string'.ts(2322)
button.component.tsx(4, 3): The expected type comes from property 'onClickHandler' which is declared here on type 'IntrinsicAttributes & IButton<string | Event>'

I dont know why it happen, i already declare type generic for button, i need type event for using e.preventDefault in another component

Does anyone have a solution? Thank you

Answer 1

Looks like you need to change

Event | string

to

SyntheticEvent | string

since buttons in react don't pass Event to click handlers but rather SyntheticEvent .