React.ButtonHTMLAtrribute中不同泛型的作用

来源:4-11 精益求精 - Buton 组件编码第二部分

慕粉3775984

2020-08-28

比如这两个有什么区别

React.ButtonHTMLAtrribute<HTMLElement>
React.ButtonHTMLAtrribute<HTMLButtonElement>
写回答

1回答

张轩

2020-09-03

同学你好 ButtonHTMLAtrribute 的定义是这样的

interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
    autoFocus?: boolean;
    disabled?: boolean;
    form?: string;
    formAction?: string;
    formEncType?: string;
    formMethod?: string;
    formNoValidate?: boolean;
    formTarget?: string;
    name?: string;
    type?: 'submit' | 'reset' | 'button';
    value?: string | string[] | number;
}

所以我们发现这个 T 仅仅是影响他继承的 HTMLAttributes 的,我们在深挖下去,

interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {

发现他是印象继承的 DOMAttributes 的,继续深挖

interface DOMAttributes<T> {
    onChange?: FormEventHandler<T>;
    onChangeCapture?: FormEventHandler<T>;
    ... 等等很多事件
}

所以这个泛型是作用在事件上面的,也就是说,假如你在这个元素上面添加事件,它会自动根据你传入的泛型推断出事件的类型

0
1
慕粉3775984
非常感谢!
2020-10-17
共1条回复

React18+TS高仿AntD从零到一打造组件库

设计,开发,测试,发布再到 CI/CD,从0到1造轮子

2123 学习 · 959 问题

查看课程