Javascript 仅允许语义UI中的数字反应表单输入

我创建了一个货币输入组件，允许用户输入数值。我把输入类型改为“数字”。这只适用于Chrome（用户仍然可以在Firefox中输入非数值）

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;

从“React”导入React；
从“语义ui反应”导入{Form}；
接口ICurrencyInputProps{
onChange（值：any）：无效；
校验范围？：布尔值；
min：编号；
最大：数量；
validationMessage:string；
cssClasses？：字符串；
}
导出类CurrencyInput扩展了React.Component{
状态={
显示无效错误：错误，
值：null
};
render（）{
返回(
{
设value=null；
if（event.target.value）value=parseInt（event.target.value）；
this.setState（{value:value}）；
this.props.onChange（值）；
}}         
/>      
);
}
}
导出默认货币输入；

用法：

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

{
这是我的国家({
溢价：数据
});
}}
min={TargetPremiumRange.min}
max={TargetPremiumRange.max}
validationMessage=“验证消息”/>

---

我想阻止用户输入任何非数值。我怎样才能做到这一点

您可以在

中更改onChange中的错误状态。比如：

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);
        }
    }       
}  

---

type=“text”pattern=“[0-9]*”

。不起作用。即使用户可以输入文本，当单击按钮时，也会出现警告，这将阻止用户输入非数字值。[在firefox浏览器中]谢谢。但是用户仍然可以输入非数值？是的，但是如果该值不正确，它将不会更改保存在状态中的值，将显示错误状态，并且允许用户进行更正。您可以检查每个

keydown（）
onchange（）
应该涵盖这一点。