react-native 中的文本输入

Question

限制为最多两位小数。当我输入第三位小数时，该数字会添加一会儿，然后消失。我希望小数点后第三位根本不显示。我怎样才能编程做到这一点？非常感谢你的帮助！！帕特里克

<TextInput
      value={displayValue}
      onChangeText={handleInputChange}
      style={styles.input}
      keyboardType="decimal-pad"
      selection={{
        start: displayValue.length,
        end: displayValue.length,
      }}

      // Kurzorem před znakem €
 />

Answer 1

您可以在此处添加正则表达式：

const handleInputChange = (text) => {
    // Use a regular expression to match the valid format (2 decimal places)
    const regex = /^\d*\.?\d{0,2}$/;

    // Check if the input matches the regex
    if (regex.test(text)) {
        setDisplayValue(text);
    }
};

// 您的 TextInput 组件

<TextInput
    value={displayValue}
    onChangeText={handleInputChange}
    style={styles.input}
    keyboardType="decimal-pad"
    selection={{
        start: displayValue.length,
        end: displayValue.length,
    }}
/>

handleInputChange 函数检查新输入是否与正则表达式匹配。如果是，它将用新值更新状态。如果没有，它就会忽略它，有效防止任何无效输入。

我希望这会起作用。