在Typescript中扩展基类属性
我正在尝试为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>>;
}
我想重写所有类型的控件（如输入，文本，textarea等） 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（）功能？
不要用CustomControl扩展Control ，你应该包装它。
你真正想要做的是修改Control的render()方法并添加一个自定义的onKeyPress 。 扩展Control的问题在于，您只能覆盖 Control的render方法，而不能对其中的部分进行更改。
但是，如果您用自己的组件包装 Control组件，则可以按照您所期望的方式对其进行影响。
如果你看看ControlProps<T>的定义，你会看到：
export interface ControlProps<T> extends React.HTMLProps<T> {
因为它扩展了React.HTMLProps所以它支持onKeyPress方法作为道具。
如果我们将所有这些信息结合在一起，您可以执行如下操作：
import * as React from "react";
import { Control, ControlProps } from "react-redux-form";
export class CustomControl<T> extends React.Component<ControlProps<T>> {
onKeyPress(e: any) {
if (e.key === "Enter") {
e.preventDefault();
}
}
render() {
return <Control {...this.props} onKeyPress={e => this.onKeyPress(e)} />;
}
}
请注意，上述实施将完全覆盖任何onKeyPress为道具，以通过CustomControl支持自定义的onKeyPress 。
如果您还想调用任何作为道具传递的onKeyPress ，则可以将以下内容添加到自定义onKeyPress函数的底部：
// After custom logic call any onKeyPress passed to this
this.props.onKeyPress && this.props.onKeyPress(e);
尝试用等待事件触发器的EventListener覆盖基本JavaScript函数onKeyPress() ：
document.addEventListener('keypress', yourCallBack, true);
yourCallBack() {
// your code
}