React Native获取多个动态渲染TextInput输入值的最佳方法

通过外层ref遍历子节点取输入值是React/React Native下的典型反模式，不仅遍历逻辑脆弱、TS类型定义繁琐，组件重渲染时还极易拿到过期值，完全不需要这么做。直接用受控组件把输入内容同步到状态中，取值时直接读状态即可，全程不需要操作原生节点。 #

具体实现步骤 #

1. 定义存储输入值的状态 #

初始渲染2个输入框，最多支持4个，直接用字符串数组存储每个输入框的内容，TS类型可以自动推导，不需要额外定义复杂结构：

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

// 组件内初始化状态，两个空字符串对应初始2个输入框
const [inputValues, setInputValues] = useState<string[]>(['', '']);

2. 渲染时直接绑定值和变更事件 #

遍历存储值的状态数组渲染列表，给每个TextInput绑定value和onChangeText属性，输入时自动更新对应索引位置的状态值，增删输入框的逻辑也直接同步修改这个状态数组即可：

<View>
  {inputValues.map((value, index) => (
    <View key={index}>
      <View style={{ display: "flex", flexDirection: "row" }}>
        <TextInput 
          placeholder={`选项 ${index + 1}`} // 替换为你原本的占位符内容即可
          value={value}
          onChangeText={(text) => {
            setInputValues(prev => {
              const updated = [...prev];
              updated[index] = text;
              return updated;
            })
          }}
        />
        {inputValues.length > 2 && index === inputValues.length - 1 && (
          <TouchableOpacity onPress={() => {
            // 删除最后一个输入框
            setInputValues(prev => prev.slice(0, -1));
          }}>
            <Text>Remover</Text>
          </TouchableOpacity>
        )}
      </View>
      {index >= inputValues.length - 1 && index < 3 && (
        <TouchableOpacity onPress={() => {
          // 新增输入框前加兜底判断，确保最多4个
          if (inputValues.length < 4) {
            setInputValues(prev => [...prev, '']);
          }
        }}>
          <Text>Adicionar</Text>
        </TouchableOpacity>
      )}
    </View>
  ))}
</View>

3. 直接读取状态获取所有输入值 #

需要提交、使用输入内容时，直接访问inputValues即可，这个数组始终和输入框内容保持同步，类型自动识别为string[]，没有任何额外的遍历或类型转换成本。 #

补充说明 #

如果你有聚焦输入框、强制失焦这类必须操作原生组件实例的需求，也不要用单个外层ref递归找子节点，改用ref数组绑定每个输入框实例即可：

const inputRefs = useRef<(TextInput | null)[]>([]);

// 渲染时给每个TextInput绑定ref
<TextInput
  ref={node => inputRefs.current[index] = node}
  // 其余属性不变
/>

注意ref数组只适合做组件实例操作，不要用它来读取输入值，取值永远优先走受控状态的方案。

内容的提问来源于stack exchange，提问作者José Carlos