Can I submit multiple tcomb forms with one onPress?

406 Views Asked by At

I'm building a React Native app and using the tomb-form-native library for my forms. In one of my screens, I loop through an array of types and output a form for each type:

{my_types.map(ob =>
  <View key={++i}>
    <Text>{ob.type} #{ob.num}</Text>
    <Form 
      ref={(c) => { 
        this.form = {}
        this.form[ob.type] = c 
      }} 
      type={_formType(this, ob.type)} 
      options={_formOptions(ob.type)} 
      value={this.state.value}
      onChange={this.onChange.bind(this)}
    />
  </View>
)}

<TouchableHighlight style={styles.button} onPress={this.onPress.bind(this)}>
  <Text style={styles.buttonText}>Submit</Text>
</TouchableHighlight>

But when I try to get the submitted values in my onPress function, it doesn't work for multiple types. It works for one type if I only call getValue() once:

input = this.form['my_type'].getValue()
console.log(input) // I see in my debugger that it works.

But if I try to get the input for two or more types, I don't see anything in the log...

input = this.form['my_type'].getValue()
console.log(input) // Nothing. It doesn't work.

input2 = this.form['my_other_type'].getValue()
console.log(input2) // Nothing here either.

Is it possible to use the tcomb library to submit multiple forms with one onPress? Maybe it's the way I call my onPress function in the onPress property of TouchableHighlight?

UPDATE

This simplified onPress function suggests my form ref is only working the last time through the loop. If my loop has two items...

  onPress() {

    let input = this.form[1]
    console.log(input) // Undefined.

    let input2 = this.form[2]
    console.log(input2) // Object.

  }
1

There are 1 best solutions below

0
On

It appears to be possible. If I use an array to track the form refs, it works:

this.form = []

return (
...

{a.map(ob =>
  <View key={++i} style={s}>
    <Text>{ob.type} #{ob.num}</Text>
    <Form 
      ref={(c) => { 
        this.form.push(c)
      }} 
      key={i}
      type={_formType(this, ob.type)} 
      options={_formOptions(ob.type)} 
      value={this.state.value}
      onChange={this.onChange.bind(this)}
    />
  </View>
)}

<TouchableHighlight style={styles.button} onPress={this.onPress.bind(this)}>
  <Text style={styles.buttonText}>Submit</Text>
</TouchableHighlight>

And here is a simplified onPress...

onPress() {
  let tF = this.form
  tF.forEach(function(f) {
    if (f) { // First two times through the loop, f is null, in my application.
      console.log(f.getValue()) // It works!
    }
  })
}