React Native中如何实现TextInput输入内容追加而非覆盖

问题出在onSubmitEditing的回调逻辑里，你当前是直接用新输入的文本覆盖了原有name状态。要实现内容追加效果，需要把原有状态内容和新输入的文本拼接后再更新状态。

修改核心逻辑 #

把onSubmitEditing的回调改成函数式更新，基于原有状态值拼接新内容：

onSubmitEditing={(value) => setName(prevName => `${prevName} ${value.nativeEvent.text}`)}

这里用空格作为新旧内容的分隔符，如果你不需要分隔符，直接写成prevName + value.nativeEvent.text即可；如果需要其他分隔符（比如逗号、换行），调整拼接字符串即可，例如${prevName}, ${value.nativeEvent.text}。

修改后的完整代码 #

import { StyleSheet, Text, View, TextInput, SafeAreaView } from "react-native";
import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");

  return (
    <SafeAreaView>
      <View style={styles.container}></View>
      <TextInput
        style={styles.input}
        placeholder="John Doe"
        onSubmitEditing={(value) => setName(prevName => `${prevName} ${value.nativeEvent.text}`)}
      />
      <Text>Welcome: {name}</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  input: {
    borderColor: "gray",
    width: "100%",
    borderWidth: 1,
    borderRadius: 10,
    padding: 10,
  },
});

额外说明 #

使用函数式更新（setName(prevName => ...)）是因为当新状态依赖旧状态时，这种方式能确保拿到最新的状态值，避免因React状态更新异步特性导致的逻辑错误。

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