Last Updated: September 15, 2016
·
12K
· 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}/>
    );
}