当前位置: 首页 > 面试题库 >

只有数字。在React中输入数字

周鸿运
2023-03-14
问题内容

我试图从输入中排除减号和加号,但这是错误的:

handleChange(event) {
  const value = event.target.value.replace(/\+|-/ig, '');
  this.setState({financialGoal: value});
}

渲染输入代码:

<input style={{width: '150px'}} type="number" value={this.state.financialGoal} onChange={this.handleChange}/>

问题答案:

我试图模仿您的代码,并发现 React with 存在问题<input type='number' />。有关解决方法,请检查此示例并自己尝试:https
:
//codepen.io/zvona/pen/WjpKJX?editors=0010

您只需使用数字模式将其定义为普通输入(type =’text’):

    <input type="text" pattern="[0-9]*"
     onInput={this.handleChange.bind(this)} value={this.state.financialGoal} />

然后比较输入的有效性:

const financialGoal = (evt.target.validity.valid) ? 
  evt.target.value : this.state.financialGoal;

这种方法最大的警告是涉及移动->键盘不是数字形式而是普通字母形式。



 类似资料:
  • 我试图从输入中排除正负,但它出了问题: 渲染输入代码:

  • 我有一个输入字段,用户只能在其中输入数字。 JSFIDLE演示 问题是:当我输入一个数字(例如,)然后按点()时,或-浏览器会自动删除输入字段的内容(值设置为“”=空字符串)。但是为什么呢?将类型从更改为似乎可以解决问题。但是,我失去了输入字段的向上/向下箭头功能。有什么想法吗?

  • 我是JAVA的新手,文本字段是否可以只接受数字输入?是否也有可能在代码内部有一个等式?例如:(毛额*10) 下面是我希望有数值输入的代码://Display private class Handler implements ActionListener{public void actionPerformed(ActionEvent e){

  • 本文向大家介绍vue.js实现只能输入数字的输入框,包括了vue.js实现只能输入数字的输入框的使用技巧和注意事项,需要的朋友参考一下 在菜鸟教程里,看了vue.js的教程,看完后,练练手,就试着实现了只能输入数字的输入框。在之前的博客里,用jquery也实现了这样的功能,这里用vue.js来实现,把实现的过程记录下来 如果只是一个输入框,要实现就非常的简单了,输入框的内容和数据绑定,给数据加一个

  • 问题内容: 我是angularjs的新手。我想知道什么是只允许在文本框中键入有效数字的方法。例如,用户可以键入“ 1.25”,但不能键入“ 1.a”或“ 1 ..”。当用户尝试输入下一个将使它成为无效数字的字符时,他将无法输入。 提前致谢。 问题答案: 您可以尝试使用此指令来阻止将任何无效字符输入到输入字段中。( 更新 :这依赖于对模型具有明确知识的指令,这对于可重用性而言并不理想,请参见下面的可

  • 可以输入数值。 用法 Your browser does not support the video tag. 案例:数字标签 功能:显示输入的数值