我正在嘗試做一個簡單的輸入表單，它只接受總長度為 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 總是落后一鍵的狀態。
我也嘗試type="number"在我的 JSX 中使用該屬性，但這max=9999999999不能與maxLength=10屬性一起使用
uj5u.com熱心網友回復：
正確復制： e.target.value 顯示“后面”的一鍵值
使用 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;
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/321766.html