[英]generic type button with typescript in react
你好,我正在开发一个待办事项应用程序,所以我有一个文本编辑器和两个按钮,代码如下
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;
我还定义了一个 Button 组件
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;
按钮容器
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;
}
`;
错误来自此按钮<Button onClickHandler={onSubmit} label="Save" />
它给了我错误是
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>'
我不知道为什么会这样,我已经为按钮声明了泛型类型,我需要类型事件才能在另一个组件中使用 e.preventDefault
有没有人有办法解决吗? 谢谢
看起来你需要改变
Event | string
至
SyntheticEvent | string
因为 react 中的按钮不会将Event
传递给单击处理程序,而是将SyntheticEvent
传递给。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.