在Typescript中扩展基类属性

Question

我正在尝试为ReactReduxForm的Control组件创建一个包装类来添加其他功能.这是基类/组件定义:

export class Control<T> extends React.Component<ControlProps<T>, {}> {
    static custom: React.ComponentClass<ControlProps<HTMLInputElement>>;
    static input: React.ComponentClass<ControlProps<HTMLInputElement>>;
    static text: React.ComponentClass<ControlProps<HTMLInputElement>>;
    static textarea: React.ComponentClass<ControlProps<HTMLTextAreaElement>>;
    static radio: React.ComponentClass<ControlProps<HTMLInputElement>>;
    static checkbox: React.ComponentClass<ControlProps<HTMLInputElement>>;
    static file: React.ComponentClass<ControlProps<HTMLInputElement>>;
    static select: React.ComponentClass<ControlProps<HTMLSelectElement>>;
    static reset: React.ComponentClass<ControlProps<HTMLButtonElement>>;
    static button: React.ComponentClass<ControlProps<HTMLButtonElement>>;
}

我想覆盖onKeyPress所有类型的控件(例如输入,文本,文本区域等)的功能,这些控件是基Control类/组件的静态属性.

这是我的派生类的骨架定义:

import * as React from "react";
import { Control } from "react-redux-form";

export class CustomControl<T> extends Control<T> { }

我希望以下功能适用于以下所有控件类型(例如,文本,选择等)CustomControl:

  onKeyPress(e: any) {
    if (e.key === "Enter") {
      e.preventDefault();
    }
  }

如何使用我的`onKeyPress()功能？

Answer 1

onKeyPress()尝试使用等待事件触发的 EventListener 覆盖基本 javascript 函数：

document.addEventListener('keypress', yourCallBack, true);

yourCallBack() {
  // your code
}

放在app.component.ts里面应该没问题