reactjs 在React的Input中仅允许数字(antd样式)

anauzrmj 于 2022-12-22 发布在 React

关注(0)|答案(7)|浏览(640)

我知道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”可以工作，但这不是我想要的。我想要使用react进行验证，因为我想要控制小数和最多多少位数，并且非负
我在这里添加了代码https://codepen.io/DadyByte/pen/xYgLvy?editors=1010
我找到了根本原因。如果使用FormItem，则无论如何都允许键入。如果在FormItem之外使用Input，则代码仍在运行。如何防止此问题

reactjs

来源：https://stackoverflow.com/questions/48691534/allow-only-numbers-in-input-in-react-antd-styling

7条答案

按热度按时间

o7jaxewo1#

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

赞(0）回复(0）举报 2022-12-22

9cbw7uwe2#

根据www.example.com，最简单且远不复杂的方法www.w3schools.com：

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

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

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

在渲染输入时：

<input
   type="text"
   className="form-control"
   name="someName"
   value={this.state.someName}
   onChange={this.onHandleChangeNumeric}
    />

重要事项：不要使type=“number”，它不会起作用。

赞(0）回复(0）举报 2022-12-22

1cosmwyk3#

我想你是用它来输入电话号码的。
这是你可以使用的输入。

<input
   placeholder="Telephone Number"
   onChange={ (e) => {
     const telNo = e.target.value;
     const re = /^[0-9\b]+$/;
     if (telNo === '' || re.test(telNo)) {
       this.setState({ telNo: e.target.value });
     }
   }
   value={ this.state.telNo }
   type="tel"
 />

赞(0）回复(0）举报 2022-12-22

xeufq47z4#

HTML 5有一个本地解决方案：
第一个月
这是假设您的Input组件使用HTML5 <input />标记

赞(0）回复(0）举报 2022-12-22

66bbxpm55#

只要使用下面的代码，它只会接受数字，也适用于Ant Design输入组件。

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

赞(0）回复(0）举报 2022-12-22

yqkkidmi6#

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

赞(0）回复(0）举报 2022-12-22

eh57zj3b7#

嗨@爸爸字节，

设置模式属性以防止用户在输入字段中输入非整数值。

<input type="text" pattern="\d*" value={this.state.matchPercentage} onChange={this.handlePercentMatch} style={{ width: 100, marginLeft: 10 }} />

表达式\d*匹配任意位数（0或更多）。这将只允许在输入字段中输入整数值。
或者，您也可以使用/^[0-9]+$/。

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

赞(0）回复(0）举报 2022-12-22

我来回答

reactjs 在React的Input中仅允许数字(antd样式)

7条答案

嗨@爸爸字节，

相关问题

热门标签

最新问答