Reagieren Native Formular Ref leer

Question

Ich habe ein Formular productDetails und ich möchte auf den Wert dieses Formulars zugreifen, sobald der Benutzer auf die Schaltfläche Post Your Ad klickt.

Das Problem, mit dem ich konfrontiert bin, ist, dass ich nicht auf den Wert des Formulars zugreifen kann. Der Fehler ist undefined is not an object (evaluating 'this.refs.productDetails.getValue')

Ich denke, Grund, warum ich diesen Fehler bekomme ist, weil this.refs leer ist. Aber ich weiß nicht, warum es leer ist.

Hilfe wird sehr geschätzt.

renderScene(route, navigator) { 
return (
    <View style={styles.body}> 
    <Form ref="form"> 
     <Text style={{color:'black'}}>Add Photos</Text> 
     <View style={styles.viewRow}> 
     <TouchableOpacity onPress={this.selectPhoto.bind(this,0)}> 
      <View style={{width: 100,marginLeft:5, height: 100, backgroundColor: 'skyblue', marginTop:5}}> 
      { arr[0] == null ? <Text></Text> : 
       <Image style={styles.selectedImage} source={arr[0]} /> 
      } 
      </View> 
     </TouchableOpacity> 
      <TouchableOpacity onPress={this.selectPhoto.bind(this,1)}> 
      <View style={{width: 100,marginLeft:5, height: 100, backgroundColor: 'skyblue',marginTop:5}}> 
       { 
       arr[1] == null ? <Text></Text> : 
       <Image style={styles.selectedImage} source={arr[1]} /> 
       } 
      </View> 
     </TouchableOpacity> 
     </View> 

     <View style={styles.viewRow}> 
     <View style={styles.viewColumn}> 

      <Text style={{color:'black'}} >Select Category</Text> 
      <TextInput type="TextInput" name="category" 
      style={styles.textInputMedium}/> 
     </View> 

     <View style={styles.viewColumn}> 
      <Text style={{color:'black'}}>Price</Text> 
      <TextInput type="TextInput" name="price" 
      placeholder='NRs.' 
      style={styles.textinputSmall}/> 
     </View> 
     </View> 
     <View style={styles.viewColumn}> 
      <Text style={{color:'black'}}>Title</Text> 
      <TextInput type="TextInput" name="title" 
      placeholder='Add Title' 
      style={{height: 40,width:305, borderColor: 'gray', borderWidth: 1}}/> 
     </View> 
     <View style={styles.viewColumn}> 
     <Text style={{color:'black'}}>Description</Text> 
     <TextInput type="TextInput" name="description" 
      placeholder='Add Description' 
      style={styles.textInputBig}/> 
     </View> 
    </Form> 
    <TouchableHighlight style={styles.submit} 
     onPress={this.gotoNext.bind(this)}> 
     <Text style={styles.submitText}>Post Your Ad</Text> 
    </TouchableHighlight> 
    </View> 

); 
} 

Funktion auf Tastendruck genannt

gotoNext() { 
console.log(this.refs);//this is empty 
console.log(this.refs.productDetails.getValue());//this throws error 
} 

Answer 1

Nach umfangreichen googeln habe ich die Lösung für dieses Problem gefunden. Das Problem war, dass ich einen Navigator benutzte, um auf die Ref von meinem Formular zugreifen zu können, musste ich durch den Verweis des Navigators darauf zugreifen.

gotoNext() { 
    var formObject = this.refs.navigator.refs.form.getValues(); 
}