React Native中TextInput如何限制仅输入最多两位小数且不超过最大值

以下是我在React-Native中使用的TextInput组件代码片段：

模拟器上的渲染效果如下：

我需要让该输入框仅接受≤11.99的十进制数值，用于模拟人体身高英寸值的最高录入限制，目前我在onChangeText函数中更新对应state的值。请问我该如何实现输入值的范围限制？是否可以直接在onChangeText内部校验数值后再对应赋值？

可以直接在onChangeText内部完成校验后再更新state，这是实现这类输入限制最常用、最直接的方案。

实现逻辑说明

需要覆盖三类校验规则：

• 仅允许输入数字和小数点，过滤其他所有字符
• 仅保留1个小数点，且小数点后最多保留2位
• 整体数值不得超过11.99

完整代码示例

import { useState } from 'react';
import { TextInput } from 'react-native';

const HeightInput = () => {
  const [inchHeight, setInchHeight] = useState('');

  const handleInputChange = (inputVal) => {
    // 1. 过滤非法字符，只保留数字和小数点
    let filteredVal = inputVal.replace(/[^0-9.]/g, '');

    // 2. 处理小数点规则：仅保留1个小数点，最多2位小数
    const dotPosition = filteredVal.indexOf('.');
    if (dotPosition !== -1) {
      filteredVal = filteredVal.slice(0, dotPosition + 3);
    }

    // 3. 数值范围校验
    const numVal = parseFloat(filteredVal);
    if (!isNaN(numVal) && numVal > 11.99) {
      // 超过上限可选择直接不更新，或者自动赋值为上限值11.99
      // setInchHeight('11.99');
      return;
    }

    // 所有校验通过后更新状态
    setInchHeight(filteredVal);
  };

  return (
    <TextInput
      value={inchHeight}
      onChangeText={handleInputChange}
      keyboardType="decimal-pad" // 弹出带小数点的数字键盘，减少非法输入概率
      placeholder="请输入身高（英寸）"
      // 其余原有属性保持不变即可
    />
  );
};

可选优化

如果产品要求输入超过上限时自动修正为上限值，只需要把校验逻辑里的return替换为setInchHeight('11.99')即可。

内容的提问来源于stack exchange，提问作者Awshaf Ishtiaque