Question

这里我有一个输入字段，此输入字段是数字类型，因此我在数字类型的此输入字段上进行验证（请参见代码（仅允许数字）），它可以正常工作，但在键入一些整数后，当我将其设为空时输入字段不是要删除输入字段中的最后一个字符吗？

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

Answer 1

您需要从先前的问题中重新添加||：

<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

Answer 2

我遇到了同样的问题，对我有用的是在您的

中简单地使用defaultValue而不是value

Answer 3

我想您可以在将状态设置为新值之前重设状态。

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

}

onChange最后一个字符不能在reactjs中删除吗？

3 个答案: