输入框中输入0-100之间整数及两位小数怎么做限制 react
时间: 2024-02-22 21:56:39 浏览: 130
你可以使用React中的`<input>`标签,然后在其上绑定一个`onKeyPress`事件,使用正则表达式对输入值进行限制。以下是一个示例代码:
```jsx
import React, { useState } from "react";
function App() {
const [inputValue, setInputValue] = useState("");
const handleKeyPress = (event) => {
const keyCode = event.keyCode || event.which;
const keyValue = String.fromCharCode(keyCode);
// 正则表达式限制只能输入0-9和小数点
const regex = /[0-9.]|\./;
if (!regex.test(keyValue)) {
event.preventDefault();
}
};
return (
<div>
<input
type="text"
value={inputValue}
onChange={(event) => setInputValue(event.target.value)}
onKeyPress={handleKeyPress}
/>
</div>
);
}
export default App;
```
在这个示例中,我们使用了一个`regex`正则表达式,它只允许输入0-9数字和小数点。然后,我们在`handleKeyPress`函数中使用该正则表达式来测试每个按键的值并阻止不符合条件的字符的输入。
请注意,这只是一个基本的示例,你可以根据自己的需求来修改和扩展它。
阅读全文