React Native TextInput输入数字求和时出现逐位拼接问题求助

问题原因 #

• 仅声明了一个状态变量ival，同时用来承载两个输入框的值和最终求和结果，基础逻辑错误。正确做法是分别声明两个状态存储两个输入框的数值，再单独计算总和
• 输入事件逻辑错误：每次触发输入时直接把当前输入的完整内容和历史ival相加，导致输入多位数时多次累加。比如输入40的过程：输入第一个字符4时，val=4、ival=0，计算得4存入ival；输入第二个字符0时，val="40"转数字是40，和当前ival=4相加得44，就是你遇到的错误
• 第二个输入框错误使用了onChange事件而非onChangeText，onChange返回的是事件对象，不是直接的输入文本，会导致取值异常

修正后代码 #

// 分别存储两个输入框的输入值
const [input1, setInput1] = useState(0);
const [input2, setInput2] = useState(0);
// 直接计算两个输入值的总和
const sum = parseInt(input1) + parseInt(input2);

// 第一个输入框的输入处理
const handleInput1 = (text) => {
  // 空值兼容，避免空字符串转NaN
  setInput1(text || 0);
};
// 第二个输入框的输入处理
const handleInput2 = (text) => {
  setInput2(text || 0);
};

// 渲染部分
<TextInput
  style={[{height: 40, borderWidth: 1}]}
  value={input1.toString()}
  onChangeText={handleInput1}
  keyboardType="numeric" // 限制仅输入数字，优化使用体验
/>
<TextInput
  style={[{height: 40, borderWidth: 1}]}
  value={input2.toString()}
  onChangeText={handleInput2}
  keyboardType="numeric"
/>
<Text>{sum}</Text>

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