如何在 ReactJS 中验证输入类型 =“数字”？

Question

我在ReactJS应用程序中验证 HTML 元素输入 type="number"时遇到问题：

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

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

日志是：

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

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

提前致谢。

Answer 1

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

e.target.value;

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

Answer 2

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

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

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

Answer 3

    onChangeCount = (e) => {
        if (e.target.value > -1 && e.target.value < 1000 && +e.target.value != 0) {
          console.log(`e.target.value: ${+e.target.value}`)
          this.setState({ countBasketItem: +e.target.value });
        }
        // else if (e.target.value === 0) this.setState({ countBasketItem: 1 });
        else if (+e.target.value == 0) this.setState({ countBasketItem: "" });
      }
    
      onBlurCount() {
        console.log(`e.target.value at BLUR: ${this.countBasketItem}`)
        if (+this.countBasketItem == 0 || isNaN(+this.countBasketItem)) {
          this.setState({
            countBasketItem: 1,
          });
        }
          // this.setCountProduct() // sent request at server
      }

<input type="number" className="number"
                min="1"
                defaultValue="1"
                value={this.state.countBasketItem}
                onChange={this.onChangeCount.bind(this)}
                onBlur={this.onBlurCount.bind(this)}
              />