阅读 this answer我想出了这段代码,但没有用。我错过了什么?
function App() {
const [value, setValue] = useState();
function onChange(e) {
const re = /^[0-9\b]+$/;
if (e.target.value === "" || re.test(e.target.value)) {
setValue(e.target.value);
}
}
return <input value={value} onChange={onChange} />;
}
render(<App />, document.getElementById("root"));
最佳答案
这是根据 post 更新的答案
您可以使用属性 type="number"
和 pattern="^-?[0-9]\d*\.?\d*$"
,所以像这样修改你的输入元素:
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
<input type="number" pattern="^-?[0-9]\d*\.?\d*$" />
来源:w3shools
附言或者您可以跳过 type=number
部分和额外的 CSS,只使用该模式。
关于reactjs - 如何在 react Hook 中只允许输入数字?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61368305/