Last Updated: September 15, 2016
·
12.5K
· fr0gs

Value of input field React + Typescript

The problem with Typescript's React typings is that the SyntheticEvent that is generated does not know that
the originating DOM node is an input node. So it is as easy as:

private _onChange = (e: React.KeyboardEvent) => {
    const name = this.props.data.Name;
    const value = (e.target as HTMLInputElement).value;
    this.props.onChange(name, value);
}

public render(): JSX.Element {
    return (
        <input
            type="text"
            value={this.props.data.Value}
            onChange={this._onChange}/>
    );
}

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

A React app still loads third-party scripts outside the component tree. Tag managers, analytics, and payment fields can read the DOM those components render.

Security insights from Cside