Question

我在 ReactJS 应用程序中验证HTML元素输入类型=＆＃34;数字＆＃34; 时遇到问题：

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

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

日志为：

在桌面应用程序上一切正常，但在移动设备上存在问题。用户可以更改键盘并输入他想要的所有内容。所以我想用验证来修复它。当我尝试捕获用户输入的值时，我会得到此日志。就像React隐藏这个不正确的值一样。

我该如何解决？或者还有另一种方法如何在 ReactJS 应用程序中验证输入类型=＆＃34;数字＆＃34; ？

提前致谢。

Answer 1

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

e.target.value;

我不记得是否在移动设备上如果它传递空值，如果它不是像台式机那样的数字。但是只需对它进行检查。不要让表单提交，除非它全部有效：）

Answer 2

这是验证方法的最佳方式：

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

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