如何使 TextInput 只接受最多 2 个小数位的最大值？

Posted 2023-05-07

【中文标题】如何使 TextInput 只接受最多 2 个小数位的最大值？

【英文标题】：How to make TextInput only accept up to 2 decimal places with a max value?

【发布时间】：2021-12-19 10:57:54

【问题描述】：

这是我在 React-Native 中的 TextInput 组件的代码 sn-p：

模拟器上的渲染是这样的：

我想让输入字段只接受十进制数 onChangeText 函数中，我正在更新状态的值。 有什么想法可以用最大值实现这个输入绑定吗？我是否检查onChangeText 中的值，然后相应地设置值？

【参考方案1】：

使用step=".01" 代替step="any"，它允许任意数量的小数位，它允许最多两位小数。 这个问题是重复的。试试这个链接 allow 2 decimal

【讨论】：

TextInput 没有 'step' 属性

【参考方案2】：

您可以在onChangeText 中检查用户输入的值。

onChangeText=(value) => 
    const parsedQty = Number.parseFloat(value) // Convert input value to a Float
    if(Number.isNaN(parsedQty))
        setFieldValue(0) // In case user input a characters instead of a number
     else if(parsedQty >= 11.99) 
        setFiledValue(11.99) // Set the value to 11.99 if the user input more than 11.99
     else if (parsedQty < 0) 
        setFieldValue(0) // Set the value to 0 if the user input is below 0. You can customize this part if you want a minimum value
     else 
        setFieldValue(parsedQty)
    

【讨论】：

这解决了输入大于11.99的数字的问题。允许用户只输入 2 位小数怎么样？

为此，您可以设置小数点 (.) 符号后的最大字符数。