React Native：无法读取未定义的属性 'length'

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

如您所见，我首先在构造函数中定义 this.state，然后定义在创建表单的 JSX 函数中调用的 handlePress() 方法。

出于某种原因，在按下提交时我遇到了以下错误：

Cannot read property 'length' of undefined.

t.value

namefields.js:33:24

Object.onPress

namefields.js:102:56

这让我感到困惑，因为正如我所说，我在构造函数中定义了状态，并在要求输入 newValue 的表单函数中定义了状态。

我的代码有什么问题？

Answer 1

在构造函数中绑定handlePress:

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

Answer 2

将传递给 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 =

React Native：无法读取未定义的属性 'length'

React Native: Cannot read propert 'length' of undefined

javascript

reactjs

react-native

registration

jsx