Extending a base class property in Typescript

Question

I am trying to create a wrapper class for the ReactReduxForm Control component to add additional features. Here is the definition of the base class / component:

 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>>; } 

I would like to redefine the onKeyPress functionality for all types of controls (e.g. input, text, text box, etc.), which are static properties of the Control base class.

Here is my skeleton definition for my derived class:

 import * as React from "react"; import { Control } from "react-redux-form"; export class CustomControl<T> extends Control<T> { } 

I would like to use the following functions for all types of controls (e.g. text, selection, etc.) of CustomControl :

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

How can I use my onKeyPress () function?

Answer 1

Instead of expanding Control with CustomControl you should wrap it.

What you really want to do is change the render() Control method and add a custom onKeyPress . The problem with the Control extension is that you can only override the Control rendering method and not make changes to its parts.

However, if you wrap the Control component with your own component, you can influence it the way you want.

If you look at the definition for ControlProps<T> , you will see the following:

 export interface ControlProps<T> extends React.HTMLProps<T> { 

Since it is extended by React.HTMLProps , it supports the onKeyPress method as a prop.

If we combine all this information together, you can do something like:

 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)} />; } } 

Please note that the above implementation completely cancels any onKeyPress passed as a support to CustomControl in favor of your custom onKeyPress .

If you also wanted to call any onKeyPress that is passed as a prop, you could add the bottom of your onKeyPress custom function:

 // After custom logic call any onKeyPress passed to this this.props.onKeyPress && this.props.onKeyPress(e); 

Answer 2

try overriding the core javascript function onKeyPress() with an EventListener that waits for an event trigger:

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

Put inside app.component.ts and should be fine