学习用途：如何获取动态生成的Text、Numeric类input组件的输入值

核心逻辑是提升表单状态到公共父层，用字段唯一标识作为状态key绑定所有输入组件的变更事件，具体改造步骤如下：

1. 改造FormScreen组件，定义全局表单状态 #

将所有输入值统一存在FormScreen的状态中，方便后续提交时直接读取完整数据：

import { useState } from 'react';
import { Button } from 'react-native'; // 可根据你使用的组件库调整

const FormScreen = ({route, navigation}) => {
  // 表单状态结构：{ [字段名/字段ID]: 输入值 }
  const [formValues, setFormValues] = useState({});

  // 统一更新单字段值的方法
  const updateFormValue = (fieldKey, inputValue) => {
    setFormValues(prevState => ({
      ...prevState,
      [fieldKey]: inputValue
    }));
  };

  // 表单提交逻辑
  const handleFormSubmit = () => {
    // 这里直接获取所有字段的输入值，可直接调用提交接口
    console.log('完整表单数据：', formValues);
  };

  return (
    <Container>
      <InputBody 
        route={route.params.paramKey} 
        navigation={navigation}
        onValueChange={updateFormValue}
      />
      {/* 增加提交按钮触发提交逻辑 */}
      <Button title="提交表单" onPress={handleFormSubmit} />
    </Container>
  );
};

2. 改造InputBody组件，透传更新方法、修正key值 #

注意原代码中用uuid.v4()作为循环key会导致每次渲染组件重置、输入值丢失，改用接口返回的_id作为唯一key：

// 先解析传入的接口返回数据
const Body = JSON.parse(route).message;

return (
  <>   
  {Body.length > 0 ? (     
    Body.map(item => (
      <React.Fragment key={item._id}>
        <Texto>{item.field}</Texto>  
         {renderContent(item.fieldtype, item.field, item._id, onValueChange)}
      </React.Fragment>
    ))
  ) : (
    <ActivityIndicator size="large" color="#eb6b09" />
  )}
  </>
)

如果存在同名字段，用_id作为状态key可以避免值覆盖，建议优先用_id而非field作为状态的唯一key。

3. 改造renderContent方法，绑定输入组件的变更事件 #

给每个输入框绑定onChangeText事件，将输入值同步到全局表单状态：

function renderContent(type, fieldName, fieldId, onValueChange) {
  // 优先用fieldId作为状态key，避免同名字段冲突
  const stateKey = fieldId;
  switch(type) {     
    case 'Numeric':
      return (
        <NumberInput 
          key={stateKey}
          keyboardType="numeric" 
          onChangeText={(value) => onValueChange(stateKey, value)}
        />
      );
    case 'Text':
      return (
        <TextInput 
          key={stateKey}
          onChangeText={(value) => onValueChange(stateKey, value)}
        />
      );
  }
}

可选优化 #

• 如需字段初始值回填，可在FormScreen初始化状态时，遍历字段数组给formValues设置初始值即可
• 表单校验可在handleFormSubmit方法中统一遍历formValues校验所有字段合法性
• 如需支持输入值格式转换（比如数字类型转Number而非字符串），可在updateFormValue方法中根据字段类型做统一处理

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