Javascript 以React形式处理数字属性

我在React表单中使用受控组件，将表单中字段的值绑定到用于收集数据的对象的属性-请参见下文。对于表单中的数字字段，我喜欢使用数字类型的属性，但我发现了一个令人不快的行为，希望了解其他人如何处理这个问题

// In my reducer, I have this object that I use to collect data

newItem: {
   description: "",
   reward: 0
},


// Then, in my component, I'll tie the input to a property of the object

<input name="reward" type="number" value={this.props.newItem.reward} onClick={e => this.myHandler(e)} />

我通常会将数值字段的初始值设置为0，然后在相应字段的表单中呈现0。这有点不友好，因为用户必须首先选择值，然后在中键入一个新值-我意识到可以使用键盘和鼠标技巧，但大多数用户不知道，他们只需使用鼠标突出显示值，然后在中键入一个新的

但我遇到的真正问题是，如果用户删除0，我们最终会在字段中显示NaN-请参见下面的“之前”和“之后”

---

除了为我的属性使用字符串类型，然后在需要时将其解析为数字之外，我还需要哪些其他选项来处理此情况？

这只是一个建议，但您可能需要一个onChange函数，它将查看当前值是否为数字，如果不是，则将值设置为0

onChange(event){
  if( isNaN(event.target.value) ){
    // do your stuff here
  }
}

---

您可以显示如下占位符值，而不是当前使用的初始值：

---

您可能可以通过在value参数中添加一个条件并指定一个默认数值来绕过它：

<input name="reward" type="number" value={isNan(this.props.newItem.reward) ? 0 : this.props.newItem.reward} onClick={e => this.myHandler(e)} />

---

除了在我的属性中使用字符串类型，然后在需要时将其解析为数字，这是我在项目中使用parseInt所做的。是的，我也使用了这个，但想看看是否有更好的方法来处理这个问题。谢谢。来自浏览器的所有内容都是字符串。。因此，即使你发现了任何lib，他们也会在引擎盖下做同样的事情，进行更好的检查。@ArupRakshit你是对的！我只是想找到一个我可以依赖的干净的解决方案，不管我使用的是你建议的模式还是第三方解决方案。我认为这是可行的，但用一个特殊的处理程序处理每个数字字段并不是很有吸引力。谢谢你的建议。

<input name="reward" type="number" value={isNan(this.props.newItem.reward) ? 0 : this.props.newItem.reward} onClick={e => this.myHandler(e)} />