如何防止用户在React Native中输入多个期间?

vq8itlhq  于 2023-02-09  发布在  React
关注(0)|答案(1)|浏览(97)

我正在使用UI Kitten的Input组件和react-hook-form,我不希望用户在Press上放置多个句点,因此一旦输入了一个句点,用户就不允许输入另一个句点;这是小数点。
示例:

Allowed Input -> .9, 0.9
Disallowed Input -> ..9, ..09

任何帮助将不胜感激,谢谢!

x6yk4ghg

x6yk4ghg1#

要监视对输入的更改并在更改状态之前检查它,可以使用UI Kitten的Input组件的onChangeText属性。如果输入字符串只有一个句点,则可以使用正则表达式来确定它是否合法并相应地更新状态。如果它无效,则可以生成错误消息。从以下代码中可以了解到:

const MyInput = () => {
const [value, setValue] = useState('');

const handleChange = (text) => {
const pattern = /^\d*(\.\d{0,2})?$/;
if (!pattern.test(text)) {
  return;
}
setValue(text);
};

return (
<Input
  value={value}
  onChangeText={handleChange}
  placeholder="Enter decimal value"
/>
);
};

export default MyInput;

在此代码的输入文本验证中,只允许整数和最多两位小数的单个句点。如果输入无效,则不会更新状态。

相关问题