Question

我知道type = number有效，但这不是我想要的。 我的HTML：

<FormItem style={{ display: "inline-block" }}>
    {getFieldDecorator('matchPercentage', {
        initialValue: this.state.matchPercentage
     })( 
        <Input type="number" value={this.state.matchPercentage} onChange={this.handlePercentMatch} style={{ width: 100, marginLeft: 10 }} />
     )}
</FormItem>

我的职能：

handlePercentMatch = (e) => {
    const isInteger = /^[0-9]+$/;
    if (e.target.value === '' || isInteger.test(e.target.value)) {
      this.setState({ matchPercentage: e.target.value })
    }
  }

我的isInteger.test()工作意味着我只能在状态matchPercentage中获得整数。但问题是它没有反映在GUI中。我仍然可以输入字母表，即使它们没有被设置为状态。

我知道type =“number”有效，但这不是我想要的。我想验证使用反应，因为我想要控制小数和高达多少位数和非负数

我在这里添加了我的代码 https://codepen.io/DadyByte/pen/xYgLvy?editors=1010

我找到了根本原因。如果您使用FormItem，无论如何都可以输入。如果我在FormItem之外使用Input我的代码正在运行。我该怎么做才能防止它

Answer 1

HTML 5有一个原生解决方案：

<input type="number">

这是假设您的Input组件使用HTML5 <input />标记

Answer 2

根据www.w3schools.com，最简单，最简单的方法是：

Rectangle {
      color: "transparent"
      Layout.fillWidth: true
      Layout.preferredHeight: parent.height - 250

      Components.Table {
          model: _transitItemTableModelAPI
          columnWidths: [0.2, 0.15, 0.65]
      }
    }

在渲染输入上：

onHandleChangeNumeric = e => {
 let valu = e.target.value;

 if (!Number(valu)) {
 return;
 }

 this.setState({ [e.target.name]: valu });
};

假名：请勿输入type =“ number”，否则将无效。

Answer 3

Ant Design具有一个InputNumber组件。您可以使用类似的东西

import {InputNumber} from 'antd';

用法

<InputNumber placeholder="Age (Max Age :100,  Min Age:1)" size={'large'} min={1} max={100} onChange={this.handleAgeChange} />

然后您的handleAgeChange功能看起来像

 handleAgeChange = (value) => {
    this.setState((prevState) => (
         { ...prevState, age:value }
    ));
};

Answer 4

嗯，只需将 type = number 传递到输入字段<input value={this.state.matchPercentage} onChange={this.handlePercentMatch} type="number">

即可

仅允许在React中输入数字（antd样式）

4 个答案: