如何在不使用 React Native 中的状态的情况下验证 TextInput 值？

Posted 2023-04-18

【中文标题】如何在不使用 React Native 中的状态的情况下验证 TextInput 值？

【英文标题】：How to verify TextInput value without using state in React Native?

【发布时间】：2021-09-12 23:18:02

【问题描述】：

我正在尝试在我的 React Native 应用程序中实现一种快速验证和更改 TextInput 值的方法（它应该只允许数值和“.”字符），但是使用状态会使其非常慢，因为它是异步的，因此未经验证的值在被删除之前可见太久。

我最近在网上使用了类似的解决方案，通过监听<input> 标签的onInput 事件并将其设置为target.value 属性，但更新是即时的，没有可见的未经验证的值，我想实现同样的结果。

带状态的慢解

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

const onValueChange = (newValue) => 
    const chars = newValue.split('');
    const newChars = chars.filter(char => !isNaN(char) || char === ".");
    const returnValue = newChars.join('');
    setValue(returnValue);

TextInput 组件

<TextInput
    style=styles.mark_input
    value=value
    onChangeText=newValue => onValueChange(newValue)
/>

是否有像使用和更改事件的 target.value 属性（如在网络上）或比我当前的实现更快的解决方案？

提前致谢！

【问题讨论】：

不幸的是，在 react 甚至可以开始重新渲染之前，本机输入会自行更新。过去我使用了两个输入来解决这个问题，一个是用户实际输入的不可见输入，另一个是显示格式化的受控值。您还必须将选择位置状态从不可见状态发送到显示状态。

【参考方案1】：

你应该使用keyboardType 属性来表示TetInput。这个道具可能会对你有所帮助。 当您将 keyboardType 属性设置为 decimal-pad 时，键盘只允许数字和点。 例如：

<TextInput
style=styles.mark_input
value=value
keyboardType="decimal-pad"
onChangeText=newValue => onValueChange(newValue)
/>

更多详情请查看link