React Native中能否通过一个onPress提交多个tcomb表单？

嘿，我一眼就看出问题出在哪了——你在循环生成表单的ref回调里，每次都把this.form重置成了空对象！

看这段代码：

ref={(c) => { this.form = {}; this.form[ob.type] = c }}

每渲染一个Form组件，你就先把this.form变成空对象，再存当前这个表单的ref。这就导致前面循环生成的所有表单ref都被覆盖了，最后this.form里只会保留最后一个表单的引用，这就是为什么你在onPress里只能拿到最后一个表单的值，前面的都是undefined。

修复步骤很简单： #

1. 提前初始化this.form对象
   在组件的构造函数里先把this.form初始化为空对象，别在ref回调里重新创建：

   constructor(props) {
     super(props);
     this.form = {}; // 提前初始化好，后面直接存ref
     this.state = { value: {} };
     // 其他你需要的初始化代码...
   }
   

2. 修改ref回调，不再重置this.form
   直接给this.form的对应属性赋值就行，不用每次清空：

   ref={(c) => { this.form[ob.type] = c }}
   

现在你再去onPress里获取每个表单的值，就都能正常拿到了：

onPress() {
  // 可选链操作符?.可以避免ref不存在时报错，更稳妥
  const input = this.form['my_type']?.getValue();
  const input2 = this.form['my_other_type']?.getValue();
  
  console.log(input, input2); // 现在就能正常输出两个表单的值啦
}

额外小建议： #

你循环里用++i作为key不太规范，最好用每个ob的唯一标识（比如ob.type和ob.num的组合）作为key，比如key={${ob.type}-${ob.num}}，这样React的diff算法能更准确地识别组件，避免不必要的重渲染。

至于你问的能不能用tcomb-form-native一次提交多个表单——当然可以，只要每个表单的ref都正确保存下来，就能分别调用getValue()获取每个表单的输入值，再统一处理提交逻辑就好。和TouchableHighlight的onPress调用方式没关系，问题完全出在ref的保存逻辑上~

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