Change the Color of the TextBox Based on its Value in React TextBox component

import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.onKeyup = this.onKeyup.bind(this);
    }
    onKeyup(e) {
        const str = e.target.value.match(/^[0-9]+$/);
        if (!((str && str.length > 0)) && e.target.value.length) {
            e.target.parentNode.classList.add('e-error');
        }
        else {
            e.target.parentNode.classList.remove('e-error');
        }
    }
    onInputFocus(args) {
        if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
            args.target.parentElement.classList.add('e-input-focus');
        }
        else {
            args.target.parentElement.parentElement.classList.add('e-input-focus');
        }
    }
    onInputBlur(args) {
        if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
            args.target.parentElement.classList.remove('e-input-focus');
        }
        else {
            args.target.parentElement.parentElement.classList.remove('e-input-focus');
        }
    }
    render() {
        return (<div className="wrap">
            <label> Normal Input </label>
                <div className="e-input-group">
                    <input className="e-input" id="numericOnly" type="text" placeholder="Enter numeric values" onKeyUp={this.onKeyup} onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
                </div>
                <label> Floating Input </label>
                <div className="e-float-input e-input-group">
                    <input type="text" onKeyUp={this.onKeyup} required={true} onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
                    <span className="e-float-line"/>
                    <label className="e-float-text">Enter numeric values</label>
                </div>
            </div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('input-container'));

#input-container .e-float-input { /* csslint allow: adjoining-classes */
  margin: 30px 0;
}

.e-input-group.e-error .e-input { /* csslint allow: adjoining-classes */
  color: #f44336;
}

.e-float-input.e-error input { /* csslint allow: adjoining-classes */
  color: #f44336;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

#input-container {
  width: 240px;
  margin: 0 auto;
  padding: 20px 0px;
}

.wrap {
box-sizing: border-box;
margin: 0 auto;
padding: 20px 10px;
width: 260px;
}

.wrap label {
font-weight:bold;
}

.wrap .e-float-input {
 margin:30px 0;
}

.wrap .e-input-group {
 margin:25px 0;
}

import * as React from "react";
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
        constructor(props: any) {
            super(props);
            this.onKeyup = this.onKeyup.bind(this);
        }
    public onKeyup(e: React.KeyboardEvent) {
      const str = (e.target as HTMLInputElement).value.match(/^[0-9]+$/);
      if (!((str && str.length > 0)) && (e.target as HTMLInputElement).value.length) {
        ((e.target as HTMLInputElement).parentNode as HTMLElement).classList.add('e-error');
      } else {
        ((e.target as HTMLInputElement).parentNode as HTMLElement).classList.remove('e-error');
      }
    }

    public onInputFocus(args: React.FocusEvent) {
        if (!((args.target as HTMLElement).parentElement as HTMLElement).classList.contains('e-input-in-wrap')) {
            ((args.target as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus');
        } else {
            (((args.target as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus')
        }
    }

    public onInputBlur(args: React.FocusEvent) {
        if (!((args.target as HTMLElement).parentElement as HTMLElement).classList.contains('e-input-in-wrap')) {
            ((args.target as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
        } else {
            (((args.target as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
        }
    }

        public render() {
        return (
            <div className="wrap">
            <label> Normal Input </label>
                <div className="e-input-group">
                    <input className="e-input" id="numericOnly" type="text" placeholder="Enter numeric values" onKeyUp={this.onKeyup} onFocus = {this.onInputFocus} onBlur = {this.onInputBlur}/>
                </div>
                <label> Floating Input </label>
                <div className="e-float-input e-input-group">
                    <input type="text" onKeyUp={this.onKeyup} required = {true} onFocus = {this.onInputFocus} onBlur = {this.onInputBlur}/>
                    <span className="e-float-line"/>
                    <label className="e-float-text">Enter numeric values</label>
                </div>
            </div>
        )
    }
};
ReactDOM.render(<App />, document.getElementById('input-container'));