如何让React Native TextInput实现数值累加输入功能？

核心思路很简单：不要将用户输入的数字字符直接拼接，而是把每次输入的数字转为数值类型，和当前输入框的总数值相加，再将结果转为字符串显示在输入框中。

以下是主流移动端框架的实现示例：

React Native 实现 #

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

export default function App() {
  const [total, setTotal] = useState(0);

  // 处理数字点击事件
  const handleNumberTap = (num) => {
    setTotal(prevTotal => prevTotal + num);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={total.toString()}
        editable={false} // 禁止手动输入，只通过按钮控制
        keyboardType="numeric"
      />
      <View style={styles.keyboard}>
        {[1,2,3,4,5,6,7,8,9,0].map(num => (
          <TouchableOpacity
            key={num}
            style={styles.key}
            onPress={() => handleNumberTap(num)}
          >
            <Text style={styles.keyText}>{num}</Text>
          </TouchableOpacity>
        ))}
        <TouchableOpacity
          style={styles.key}
          onPress={() => setTotal(0)}
        >
          <Text style={styles.keyText}>清空</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  input: {
    height: 50,
    borderWidth: 1,
    borderColor: '#ccc',
    paddingHorizontal: 10,
    fontSize: 20,
    marginBottom: 20,
    textAlign: 'right',
  },
  keyboard: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  key: {
    width: '30%',
    height: 60,
    backgroundColor: '#f0f0f0',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 5,
    borderRadius: 8,
  },
  keyText: {
    fontSize: 20,
  },
});

Flutter 实现 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('数字累加输入')),
        body: const NumberInputScreen(),
      ),
    );
  }
}

class NumberInputScreen extends StatefulWidget {
  const NumberInputScreen({super.key});

  @override
  State<NumberInputScreen> createState() => _NumberInputScreenState();
}

class _NumberInputScreenState extends State<NumberInputScreen> {
  int total = 0;
  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    _controller.text = total.toString();
  }

  void _onNumberPressed(int num) {
    setState(() {
      total += num;
      _controller.text = total.toString();
    });
  }

  void _clearInput() {
    setState(() {
      total = 0;
      _controller.text = total.toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        children: [
          TextField(
            controller: _controller,
            enabled: false,
            keyboardType: TextInputType.number,
            textAlign: TextAlign.right,
            style: const TextStyle(fontSize: 24),
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              hintText: '0',
            ),
          ),
          const SizedBox(height: 20),
          GridView.count(
            shrinkWrap: true,
            crossAxisCount: 3,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
            children: [
              ...[1,2,3,4,5,6,7,8,9,0].map((num) => ElevatedButton(
                onPressed: () => _onNumberPressed(num),
                child: Text(num.toString(), style: const TextStyle(fontSize: 20)),
              )),
              ElevatedButton(
                onPressed: _clearInput,
                style: ElevatedButton.styleFrom(backgroundColor: Colors.red[200]),
                child: const Text('清空', style: TextStyle(fontSize: 20)),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

关键注意点 #

• 若使用系统键盘而非自定义数字键盘，需额外处理输入内容：监听输入变化时，提取输入的数字值，和当前总值相加（注意区分用户是输入多位数字还是连续点击单数字）。
• 输入框建议设置为不可编辑（editable={false}/enabled: false），避免用户手动输入导致逻辑混乱，完全通过按钮控制数值变化。

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