React Native中使用useState实现输入首字符后自动添加小数点

原代码存在的问题 #

• 状态初始值设为数组[""]不合理，文本输入场景应该用字符串存储内容
• userHeightHandler里的循环逻辑冗余，且Array.splice使用错误（splice返回的是被删除元素，不是修改后的数组）
• 多次调用setState会导致状态更新混乱
• JSX存在语法错误：<Text>中多了多余的+；<Input>组件结尾多了一个}

修正后的完整代码 #

import React, { useState } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

const BMIcalculator = () => {
  // 用字符串存储输入状态，初始为空
  const [inputValue, setInputValue] = useState("");

  const userHeightHandler = (value) => {
    // 过滤非数字字符，确保输入仅为数字
    const filteredValue = value.replace(/[^0-9]/g, "");
    
    let processedValue = filteredValue;
    // 根据输入长度处理自动添加小数点逻辑
    if (filteredValue.length === 1) {
      // 输入第一个字符时，自动拼接小数点
      processedValue = `${filteredValue}.`;
    } else if (filteredValue.length > 1) {
      // 输入长度大于1时，拆分整数和小数部分
      const integerPart = filteredValue.slice(0, 1);
      const decimalPart = filteredValue.slice(1);
      processedValue = `${integerPart}.${decimalPart}`;
    }
    // 更新状态
    setInputValue(processedValue);
  };

  return (
    <View style={styles.container}>
      <View style={styles.heightContentValue}>
        <Text style={{ fontSize: 22 }}>
          text: {inputValue}
        </Text>
      </View>

      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="请输入数字"
          maxLength={4} // 对应格式x.xx，总长度为4
          keyboardType="numeric"
          onChangeText={userHeightHandler}
          value={inputValue} // 双向绑定，确保输入框与状态同步
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 20,
  },
  heightContentValue: {
    marginBottom: 20,
  },
  inputContainer: {
    width: "100%",
  },
  input: {
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 8,
    padding: 10,
    fontSize: 18,
  },
});

export default BMIcalculator;

关键逻辑说明 #

• 状态管理：改用字符串存储输入内容，更贴合文本输入的场景
• 输入过滤：通过正则过滤非数字字符，避免无效输入干扰逻辑
• 小数点处理：
  • 输入第一个字符时自动拼接成x.格式
  • 输入多字符时拆分整数和小数部分，组合为x.xx格式
  • 删除操作时，内容回到单个字符会保留小数点，删至空时小数点自动消失
• 双向绑定：给TextInput绑定value属性，确保输入框内容与状态完全同步，避免出现内容不一致的问题
• 用户体验优化：设置keyboardType="numeric"唤起数字键盘，提升输入效率

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