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

不应使用Control扩展CustomControl，而应将其包裹起来。

您真正要做的是修改render()的{{1}}方法并添加自定义Control。扩展onKeyPress的问题在于，您只能覆盖 Control的渲染方法，而不能对其中的部分进行更改。

但是，如果您使用自己的组件打包 Control组件，则可以按照您希望的方式对其进行影响。

如果查看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

Answer 2

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

document.addEventListener('keypress', yourCallBack, true);

yourCallBack() {
  // your code
}

放入app.component.ts并且应该没问题

在Typescript中扩展基类属性

2 个答案: