React Native计算器：点击按钮TextInput不更新，如何不用State Hooks解决？

先解决当前代码的核心问题 #

你的代码里handlePressBtn函数只处理了点击"C"清空的逻辑，数字按钮点击时根本没有更新输入值的代码——这才是TextInput内容不更新的核心原因，和showSoftInputOnFocus、editable属性无关。哪怕保留useState，只要补充数字拼接逻辑就能正常工作：

const handlePressBtn = (val) => {
  if (val == "C") {
    setTotal("")
  } else {
    // 补充数字拼接逻辑
    setTotal(prev => prev + val)
  }
}

无需State Hooks的替代方案 #

如果不想用State Hooks，可以用useRef获取TextInput的引用，再通过setNativeProps直接修改原生组件的文本内容，绕过React状态管理：

修改后的完整代码 #

import { useRef } from 'react';
import { StyleSheet, Text, View, SafeAreaView, TextInput, TouchableOpacity } from 'react-native';

export default function App() {
  // 创建TextInput的原生引用
  const inputRef = useRef(null);
  // 用ref存储当前输入值，方便处理清空、计算等逻辑
  const currentValue = useRef("");

  const handlePressBtn = (val) => {
    if (val === "C") {
      currentValue.current = "";
      inputRef.current?.setNativeProps({ text: "" });
    } else {
      currentValue.current += val;
      inputRef.current?.setNativeProps({ text: currentValue.current });
    }
  };

  return (
    <SafeAreaView style={styles.main}>
      {/* 绑定ref，保留原有属性避免弹出键盘 */}
      <TextInput
        ref={inputRef}
        showSoftInputOnFocus={false}
        editable={false}
        style={styles.screen}
      />

      <View style={styles.button_row}>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("7")}>7</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("8")}>8</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("9")}>9</Text>
        </TouchableOpacity>
      </View>

      <View style={styles.button_row}>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("4")}>4</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("5")}>5</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("6")}>6</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.button_row}>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("1")}>1</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("2")}>2</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("3")}>3</Text>
        </TouchableOpacity>
      </View>

    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
    backgroundColor: 'black',
    justifyContent: 'flex-end',
    alignItems: 'center',
    paddingBottom: 20,
    gap: 10
  },
  screen: {
    width: '100%',
    height: 200,
    color: 'white',
    textAlign: "right",
    fontSize: 34
  },
  button_row: {
    flexDirection: 'row',
    gap: 15,
    width: '90%'

  },
  number_button: {
    flex: 1,
    width: 80,
    height: 80,
    borderRadius: 60,
    backgroundColor: 'blue',
    justifyContent: 'center',
    alignItems: 'center',
  },
  button_text: {
    color: 'white',
    fontSize: 35
  },
});

方案说明 #

• useRef用来获取TextInput的原生组件引用，通过setNativeProps直接修改其text属性，不需要依赖React状态更新触发重渲染。
• 额外用currentValue的ref存储当前输入值，方便处理清空、计算等后续逻辑，避免每次都从TextInput读取内容。
• 保留showSoftInputOnFocus={false}和editable={false}，确保点击TextInput不会弹出键盘。

内容的提问来源于stack exchange，提问作者TAHER El Mehdi