Phone React JS 中的数字验证 - 如何限制输入的类型和长度？

Question

我正在尝试做一个简单的输入表单，它只接受总长度为 10 个字符的数字。

我在我的 JSX 中使用 maxLength 属性来限制输入长度：

<FormControl input type="tel" maxLength="10" onKeyDown={(e)=> checkInput(e)} />

这是我检查是否允许使用该键的函数（仅限数字和退格键）

const [number, setNumber] = useState()

const checkInput = (e) =>{
    if(!(e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode === 8)){
        e.preventDefault()
    }
    else{
        setNumber(e.target.value)
    }
   
}

这工作正常，除了由于 keyDown e.listener.

总是落后一击的状态

我也尝试在我的 JSX 中使用 type="number" 属性，但这不能与 max=9999999999 一起使用，也不能与 maxLength=10 属性一起使用

Answer 1

正确复制：e.target.value shows values one key 'behind'

onChange 解决方案：

import React from "react";
import { useState } from "react";
import { FormControl } from "react-bootstrap";

const App = () => {
  const [number, setNumber] = useState("");

  const checkInput = (e) => {
    const onlyDigits = e.target.value.replace(/\D/g, "");
    setNumber(onlyDigits);
  };

  console.log({ number });
  return (
    <div>
      <FormControl
        type="tel"
        maxLength="10"
        value={number}
        onChange={(e) => checkInput(e)}
      />
    </div>
  );
};

export default App;

Phone React JS 中的数字验证 - 如何限制输入的类型和长度？

Phone number validation in React JS - how to limit type and length of input?

forms

validation

input

reactjs