时间戳

首页 > 解决方案 > onChange最后一个字符不会在reactjs中删除？

reactjs - onChange最后一个字符不会在reactjs中删除？

问题描述

这里我有一个输入字段，这个输入字段是数字类型所以我对这个数字类型的输入字段进行验证，见代码（它只允许数字）它工作得很好但是在输入一些整数之后，当我去制作空输入字段时不删除输入字段中的最后一个字符如何也删除？

<Input
  name='monthlyPrice'
  type='number'            
  value={this.state.monthlyPrice}
  onChange={this.onInputChangeValue}
/>

onInputChangeValue(e){
  if(e.target.value.match(/^\d+(?:\.\d+)?$/)) {
    this.setState({ [e.target.name]: e.target.value })
  }
}

标签： reactjs

解决方案

您需要||从上一个问题中添加您的背部：

<Input
  name='monthlyPrice'
  type='number'            
  value={this.state.monthlyPrice}
  onChange={this.onInputChangeValue}
/>

onInputChangeValue(e){
  if(e.target.value == "" || e.target.value.match(/^[1-9]\d*\.?\d*$/)) {
    this.setState({ [e.target.name]: e.target.value })
  }
}

注意：这仍然需要您在提交表单之前进行检查，因为这将允许他们离开以.字符结尾的字段。如果你愿意，你也可以这样做onBlur。对此进行测试的正则表达式是^[1-9]\d*(?:\.\d+)?$

注 2：此正则表达式基于 OP 的第一个问题，要求第一个数字为 1-9

推荐阅读