React Native如何点击按钮获取多个TextInput值存入单个对象

你当前代码的逻辑错误点：

• 定义了3个独立state，但两个TextInput的输入事件都只修改enteredText，完全没有更新和输入框value绑定的firstText、secondText，这两个值会一直是初始的undefined
• 两个输入框的修改都覆盖同一个enteredText变量，最终提交时只能拿到最后一次输入的内容，无法同时获取两个输入框的值

用单个对象类型的state统一存储所有输入框的值即可，不需要拆分多个独立state，后续加新输入框也方便扩展：

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

function App() {
  // 统一管理所有表单字段，初始值设置为空字符串避免受控组件警告
  const [formValues, setFormValues] = useState({
    firstText: '',
    secondText: ''
  });

  const handleSubmit = () => {
    // 提交时直接拿到包含所有输入值的对象
    console.log('所有输入值：', formValues);
    // 单独取值直接访问属性即可：formValues.firstText、formValues.secondText
  };

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Great one!</Text>

      <TextInput 
        value={formValues.firstText}
        // 更新时先拷贝原有对象的所有字段，再覆盖当前输入框对应的字段，避免其他字段值丢失
        onChangeText={text => setFormValues(prev => ({...prev, firstText: text}))}
        style={styles.input} 
        placeholder='1st text' 
      />

      <TextInput 
        value={formValues.secondText}
        onChangeText={text => setFormValues(prev => ({...prev, secondText: text}))}
        style={styles.input} 
        placeholder='2nd text' 
      />

      <Button
        onPress={handleSubmit}
        title='Submit'
        color='orange' 
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20
  },
  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 6,
    padding: 12,
    marginBottom: 16,
    fontSize: 16
  }
});

export default App;

• 更新对象类型的state时，必须通过展开运算符...复制原有对象的属性，不能直接修改整个对象覆盖，否则其他输入框已经存好的值会被清空
• TextInput的value绑定的字段，要和onChangeText里更新的字段一一对应，否则会出现输入内容不显示、值不同步的问题
• 表单类场景统一用对象管理字段，比零散声明多个state更易维护，后续新增第三个、第四个输入框，只需要在state对象里加对应字段、加对应更新逻辑即可

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