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

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

由于某种原因，按下提交后我遇到以下错误：

无法读取未定义的属性“长度”。

t.value

namefields.js:33:24

Object.onPress

namefields.js:102:56

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

我的代码有什么问题？

Answer 1

将传递给onChangeText 处理程序的参数不包括event 对象。来自docs：

onChangeText函数

文本输入的文本更改时调用的回调。更改的文本作为参数传递给回调处理程序。

所以改变：

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:''
    }
}