javascript - Permitir solo números en el Input de Formulario de Semantic UI React

He creado un componente de entrada de moneda en React para permitir que el usuario ingrese valores numéricos. Hice que el tipo de entrada fuera "number". Esto solo funciona en Chrome (el usuario aún puede ingresar valores no numéricos en Firefox).

Componente CurrencyInput:

import React from "react";
import { Form } from "semantic-ui-react";

interface ICurrencyInputProps {
  onChange(value: any): void;
  checkRange?: boolean;
  min: number;
  max: number;
  validationMessage: string;
  cssClasses?: string;
}

export class CurrencyInput extends React.Component<ICurrencyInputProps> {
  state = {
    showInvalidError: false,
    value: null
  };
  render() {
    return (
      <>
        <Form.Input
          icon="pound"
          iconPosition="left"
          placeholder="Whole pounds"
          className={this.props.cssClasses}
          type="text"
          error={this.state.showInvalidError}
          onChange={(event: any) => {
            let value = null;
            if (event.target.value) value = parseInt(event.target.value);

            this.setState({ value: value });
            this.props.onChange(value);
          }}         
        />      
      </>
    );
  }
}

export default CurrencyInput;

Uso :

<CurrencyInput
    cssClasses="has_tooltip"
    checkRange={true}
    onChange={(data: any) => {
              this.setState({
               premium: data
                        });
                      }}
    min={TargetPremiumRange.MIN}
    max={TargetPremiumRange.MAX}
    validationMessage="Validation message"/>

Quiero evitar que el usuario ingrese cualquier valor no numérico. ¿Cómo puedo lograr esto?

Respuesta #1

<Input
onKeyPress={(event) => {
        if (!/[0-9]/.test(event.key)) {
          event.preventDefault();
        }
      }}
/>

Respuesta #2

Puedes cambiar el estado de error en tu onChange en <Form.Input>. Algo como:

onChange={(event: any) => {
    let value = null;
    if (event.target.value) {
        value = parseInt(event.target.value, 10);

        // Test for valid number
        if (isNaN(value)) {
            setState({showInvalidError: true});
        } else {
            this.setState({ value: value });
            this.props.onChange(value);
        }
    }       
}