如何在ReactJS中验证input type="number"的输入？

Question

我在ReactJS应用程序中遇到了关于HTML元素input type="number"的验证问题：

render() {
    return (
        <input type="number" onBlur={this.onBlur} />
    );
},

onBlur(e) {
    console.log(e);
}

日志如下：

在桌面应用上一切正常，但在移动端存在问题。 用户可以更改键盘并输入任何他想要的内容。 因此，我希望使用验证来解决这个问题。当我尝试捕获用户输入的值时，我得到了这个日志。就像React只是隐藏了这个不正确的值。

我该如何解决呢？ 或者在ReactJS应用程序中有其他方法来验证input type="number"吗？

谢谢提前。

- Anatoli

Answer 1

这是验证的最佳方法：

<input type="number" pattern="[0-9]*" inputmode="numeric">

这样我就不能输入其他内容了。此外，通过检查 null 的 e.target.value 也无法获得良好的固定结果，因为空字段和不正确文本的字段是相同的（为空）。

- Anatoli

---

“pattern”这个属性适用于type属性的值为"text"、"search"、"tel"、"url"、"email"或"password"时，否则将被忽略。 - Jiangge Zhang

Answer 2

您可以通过以下方式访问该值：

e.target.value;

我不确定在移动设备上，如果它不是数字，是否会传递空值。但请确保检查它。除非所有内容都有效，否则不要提交表单 :)

- agmcleod

---

你可以从我的截图中看到，e.target是null，所以我无法获取它。 - Anatoli

如果您在元素上设置了一个引用：ref="myNumber"或者其他你想要的名称。您可以通过以下方式访问它：React.findDOMNode(this.refs.myNumber)。应该能够从那里访问值属性。 - agmcleod

该字段可能会报告一个空值。在验证时，请检查是否为空。 - agmcleod

这是一个好主意。如果我有有效的数据，我会有一个数字或空值，如果不是有效的 - 空。谢谢。 - Anatoli

这并没有帮到我，因为空白字段和未纠正的答案等同于相同的空结果。无论如何，谢谢。 - Anatoli