React Native：如何添加10个文本输入框并计算数值总和

嘿，我来帮你搞定这个需求！核心思路是把每个输入框的数值存在组件的state里，实时更新并计算总和。下面是完整的实现代码和关键细节解释：

完整实现代码 #

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

export default class App extends React.Component {
  // 初始化state：用数组存储10个输入框的值，sum存储实时总和
  state = {
    values: Array(10).fill(0),
    sum: 0,
  };

  // 处理单个输入框的内容变化，同时更新总和
  handleInputChange = (index, value) => {
    // 将输入的文本转为数字，非数字内容默认设为0，避免NaN问题
    const numValue = isNaN(Number(value)) ? 0 : Number(value);
    // 复制原数组，避免直接修改state（React state不可变原则）
    const newValues = [...this.state.values];
    newValues[index] = numValue;
    // 用reduce计算新的总和
    const newSum = newValues.reduce((accumulator, current) => accumulator + current, 0);
    // 更新state
    this.setState({ values: newValues, sum: newSum });
  };

  renderTextBox = (index) => {
    const placeholder = `GAME ${index + 1}`;
    return (
      <View style={styles.column} key={index}>
        <TextInput
          keyboardType="numeric" // 允许输入正负号和数字
          placeholder={placeholder}
          underlineColorAndroid="transparent"
          style={styles.TextInputStyleClass}
          value={String(this.state.values[index])} // 将数值转为字符串，避免输入框显示异常
          onChangeText={(text) => this.handleInputChange(index, text)} // 绑定输入变化事件，传入当前索引
        />
      </View>
    );
  };

  render() {
    // 生成10个输入框组件
    const teamOneInputs = Array.from({ length: 10 }, (_, i) => this.renderTextBox(i));

    return (
      <View style={styles.container}>
        <View style={styles.inputContainer}>{teamOneInputs}</View>
        {/* 实时显示计算好的总和 */}
        <Text style={styles.sumText}>总和：{this.state.sum}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  inputContainer: {
    flexDirection: 'column',
    gap: 10,
    marginBottom: 30,
  },
  column: {
    width: '100%',
  },
  TextInputStyleClass: {
    height: 50,
    borderWidth: 1,
    borderColor: '#ccc',
    paddingHorizontal: 15,
    borderRadius: 8,
  },
  sumText: {
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

关键细节解释 #

• State管理：用values数组存储10个输入框的数值，初始填充0，确保每个输入框都有默认值，避免后续计算出现NaN。
• 输入处理逻辑：handleInputChange方法会把用户输入的文本转为数字，如果输入的是非数字内容（比如空值、字母），会自动设为0，保证总和计算始终有效。
• 精准更新数值：每个输入框绑定对应的索引，修改时能精准定位到数组里的对应项，不会影响其他输入框的值。
• 实时计算总和：每次输入变化后，用数组的reduce方法快速计算总和，确保显示的总和是最新的。

额外注意点 #

• keyboardType="numeric"支持输入正负号和数字，iOS和Android都能正常识别。
• 把state里的数值转为字符串传给TextInput的value属性，避免输入框出现异常显示（比如数字转成数字类型后，输入框可能会自动去掉前导零，但这里转为字符串能保持用户输入的直观性）。

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