React原生形式ref空

我有一個表格productDetails，我想訪問此表單的值，一旦用戶點擊按鈕Post Your Ad。React原生形式ref空

我面臨的問題是我無法訪問表單的值。錯誤是undefined is not an object (evaluating 'this.refs.productDetails.getValue')

我想爲什麼我得到這個錯誤的原因是因爲this.refs是空的。但我不知道它爲什麼是空的。

非常感謝幫助。

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> 

); 
}

函數調用按鈕按下

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

來源

2016-09-08 Birat Bade Shrestha

廣泛的谷歌搜索後，我已經找到了解決這一問題。問題是我正在使用導航器，因此要訪問我的表單的引用，我必須通過導航器的引用訪問它。

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

來源

2016-09-09 03:52:27

React原生形式ref空

回答

相關問題