Question

我有一个表单productDetails，我想在用户点击按钮Post Your Ad后访问此表单的值。

我面临的问题是我无法访问表单的值。错误为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
}

Answer 1

经过大量的谷歌搜索后，我找到了解决这个问题的方法。问题是我使用的是导航器，因此要访问我的表单的参考，我必须通过导航器的参考来访问它。

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

React Native表单ref为空

1 个答案: