React Native：無法讀取未定義的屬性「長度」

Question

我一直在嘗試構建註冊應用程序，並在嘗試將新值提交給服務器時遇到最後階段的一些問題。

這裏是我的腳本：

import React from 'react'; 
import ReactNative from 'react-native'; 
import { FormLabel, FormInput,Button,Text } from 'react-native-elements' 
import { AppRegistry,TextInput,View,StyleSheet,length} from 'react-native'; 
import { StackNavigator } from 'react-navigation' 
import AccountFields from './emailandpass' 
import axios from 'axios'; 

let styles = {} 

class NameFields extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state={ 
     email:'', 
     password:'', 
     first:'', 
     last:'', 
     dob:'' 
    } 
    } 

    componentWillReceiveProps(nextProps){ 
    console.log("nextProps",nextProps); 
    } 

    handlePress(event){ 
    var Url = "http://10.68.14.170:8080"; 
    // console.log("values in register handler",role); 
    var self = this; 

    //To be done:check for empty values before hitting submit 
    if(this.state.first.length>0 && this.state.last.length>0 && this.state.email.length>0 && this.state.password.length>0 && this.state.dob.length>0) 
     { 
     var payload={ 
     "first": this.state.first, 
     "last":this.state.last, 
     "email":this.state.email, 
     "password":this.state.password, 
     "dob":this.state.dob 
     } 
     axios.post(Url+'/useraccount/signup',payload) 
    .then(function (response) { 
     console.log(response.data); 
     if(response.data.code === 200){ 
     <Text> 
      'Tal-ostja' 
     </Text> 
     } 
     else{ 
     console.log("some error ocurred",response.data.code); 
     } 
    }) 
    .catch(function (error) { 
     console.log(error); 
    }); 
    } 
    else{ 
     alert("Input field value is missing"); 
    } 
    } 

    render() { 
    return(
     <View> 
     <FormLabel 
      containerStyle={styles.labelContainerStyle}>Email</FormLabel> 
     <FormInput 
      ref='form2' 
      containerRef='containerRefYOYO' 
      textInputRef='textInputRef' 
      placeholder='Please enter your email address...' 
      onChangeText = {(event,newValue) =>this.setState({email:newValue})} 
     /> 
     <FormLabel containerStyle={styles.labelContainerStyle}>Password</FormLabel> 
     <FormInput 
      ref='form1' 
      placeholder='Please create a password...' 
      onChangeText ={(event,newValue) =>this.setState({email:newValue}) } 
     /> 
     <FormLabel 
      containerStyle={styles.labelContainerStyle}>Name</FormLabel> 
     <FormInput 
      ref='form2' 
      containerRef='containerRefYOYO' 
      textInputRef='textInputRef' 
      placeholder="What's your name ?" 
      onChangeText = {(event,newValue) =>this.setState({first:newValue})} 
     /> 
     <FormLabel containerStyle={styles.labelContainerStyle}>Surname</FormLabel> 
     <FormInput 
      ref='form1' 
      placeholder="What's your last name ?" 
      onChangeText = {(event,newValue) =>this.setState({last:newValue})} 
     /> 
     <FormLabel containerStyle={styles.labelContainerStyle}>Date of Birth</FormLabel> 
     <FormInput 
      ref='form1' 
      placeholder='YYYY-MM-DD' 
      onChangeText = {(event,newValue) =>this.setState({dob:newValue})} 
     /> 
     <Button title="Submit" onPress={(event) => this.handlePress(event)}/> 
     </View> 
    ); 
    } 
} 

module.exports = NameFields 

正如你所看到的，我首先定義構造函數，然後定義handlePress()方法，是根據它稱爲它生成表單的JSX函數內內this.state。

表格某種原因，在按下提交我遇到了以下錯誤：

Cannot read property 'length' of undefined.

t.value

namefields.js:33:24

Object.onPress

namefields.js:102:56

這是困擾我，因爲，正如我所說，我在構造函數中，並呼籲newValue形式函數中定義的狀態被輸入。

我的代碼有什麼問題？

Answer 1

將傳遞給onChangeText處理程序的參數不包括event對象。從docs：

onChangeText function

Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.

因此改變：

onChangeText = {(event,newValue) =>this.setState({email:newValue})} 

到：

onChangeText = {(newValue) =>this.setState({email:newValue})} 

......處處，你必須onChangeText =

Answer 2

綁定handlePress在構造函數中：

constructor(props){ 
    super(props); 
    this.handlePress = this.handlePress.bind(this); 
    this.state={ 
     email:'', 
     password:'', 
     first:'', 
     last:'', 
     dob:'' 
    } 
}