input-component-typescript.tsx

import * as React from 'react';

interface Props {
  value: string | number;
  name?: string;
  onChange(name: string, value: number): void;
}

interface State {
  value: string;
}

class NumericInput extends React.Component<
  Partial<React.HTMLProps<HTMLInputElement>> & Props,
  State,
> {
  constructor(props: Props & Partial<React.HTMLProps<HTMLInputElement>>) {
    super(props);
    this.state = {
      value: String(props.value),
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event: React.FormEvent<HTMLInputElement>) {
    this.props.onChange(
      event.currentTarget.name,
      Number(event.currentTarget.value),
    );
  }

  render() {
    const { value, onChange /* just to exclude */, ...htmlProps } = this.props;
    return (
      <input
        type="text"
        value={value}
        onChange={this.handleChange}
        {...htmlProps}
      />
    );
  }
}

export default NumericInput;