Question

undefined is not an object (evaluating 'event.target name') when i trying to make a sign up validated form react native Here is my code, plzz help thank you so much here is file doc online https://docs.google.com/document/d/1WeJtSFEV8zCCy5M_N1pN8SQUFMAmsoQ0-r36iDDunkM/edit?usp=sharing because i cant upload my code not sure why

import React, { Component } from 'react';
import { Text, Alert, TouchableOpacity, Button, TextInput, View, StyleSheet } from 'react-native';
import Images from '../one/Images';
import { hScale, vScale, fScale } from "react-native-scales";
import Styles from '../one/Styles';

export default class App extends Component {
   constructor(props) {
    super(props);
    this.state = {                                                                                      
      input: {},
      errors: {}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleChange(event) {
    let input = this.state.input;
    input[event.target.name] = event.target.value;
  
    this.setState({
      input
    });
  }
  
  handleSubmit(event) {
    event.preventDefault();
  
    if(this.validate()){
        console.log(this.state);
  
        let input = {};
        input["username"] = "";
        input["email"] = "";
        input["password"] = "";
        input["confirm_password"] = "";
        this.setState({input:input});
  
        alert('?? ??ng Ky');
    }
  }
  
  validate(){
      let input = this.state.input;
      let errors = {};
      let isValid = true;
   
      if (!input["username"]) {
        isValid = false;
        errors["username"] = "Xin Nh?p Tên Ng??i Dùng.";
      }
  
      if (typeof input["username"] !== "undefined") {
        const re = /^S*$/;
        if(input["username"].length < 6 || !re.test(input["username"])){
            isValid = false;
            errors["username"] = "Xin Nh?p Tên ng??i Dùng Nh? H?n 6 Ky T?.";
        }
      }
  
      if (!input["email"]) {
        isValid = false;
        errors["email"] = "Xin Nh?p ??a Ch? Email.";
      }
  
      if (typeof input["email"] !== "undefined") {
          
        var pattern = new RegExp(/^(("[w-s]+")|([w-]+(?:.[w-]+)*)|("[w-s]+")([w-]+(?:.[w-]+)*))(@((?:[w-]+.)*w[w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$)|(@[?((25[0-5].|2[0-4][0-9].|1[0-9]{2}.|[0-9]{1,2}.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2}).){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})]?$)/i);
        if (!pattern.test(input["email"])) {
          isValid = false;
          errors["email"] = "Xin Nh?p ??a Ch? Email Chính Xác.";
        }
      }
  
      if (!input["password"]) {
        isValid = false;
        errors["password"] = "Xin Nh?p M?t Kh?u.";
      }
  
      if (!input["confirm_password"]) {
        isValid = false;
        errors["confirm_password"] = "Please enter your confirm password.";
      }
  
      if (typeof input["password"] !== "undefined") {
        if(input["password"].length < 6){
            isValid = false;
            errors["password"] = "Xin Nh?p M?t Kh?u Nh?t 6 Ky T?.";
        }
      }
  
      if (typeof input["password"] !== "undefined" && typeof input["confirm_password"] !== "undefined") {
          
        if (input["password"] != input["confirm_password"]) {
          isValid = false;
          errors["password"] = "M?t Kh?u Kh?ng Trùng Kh?p.";
        }
      }
  
      this.setState({
        errors: errors
      });
  
      return isValid;
  }
 
  render() {
    return (                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
      <View style={Styles.container}>
        <TextInput
          value={this.state.input.username}
          onChangeText={this.handleChange}
          placeholder={'Tên ??ng Nh?p'}
          style={Styles.title}
          blurOnSubmit={false}
          returnKeyType="next"
          onSubmitEditing={() => { this.secondTextInput.focus(); }}
          id="username"
        />
         <TextInput
          value={this.state.input.email}
          onChangeText={this.handleChange}
          placeholder={'Email'}
          style={Styles.title}
          onSubmitEditing={() => { this.thirdTextInput.focus(); }}
          ref={(input) => { this.secondTextInput = input; }}
          returnKeyType="next"
          blurOnSubmit={false}
         id="email"          
        />
       <TextInput
          value={this.state.input.password}
          onChangeText={this.handleChange}
          placeholder={'M?t Kh?u'}
          secureTextEntry={true}
          style={Styles.title}
          onSubmitEditing={() => { this.fourTextInput.focus(); }}
          ref={(input) => { this.thirdTextInput = input; }}
          returnKeyType="next"
          blurOnSubmit={false}
          id="password"       
        />
        <TextInput
          value={this.state.input.confirm_password}
          onChangeText={this.handleChange}
          placeholder={'Xác Nh?n M?t Kh?u'}
          secureTextEntry={true}
          style={Styles.title}
          ref={(input) => { this.fourTextInput = input; }}
          returnKeyType="go"
          id="confirm_password"
           
        />
          <TouchableOpacity
           onPress={this.handleSubmit.bind(this)}
            style={{
              borderRadius: vScale(50),
              backgroundColor: '#0260AF',
              marginTop: vScale(50),
              alignItems: 'center',
              justifyContent: 'center',
              marginLeft: vScale(20),
              marginRight: vScale(20),

            }}>
            <Text style={{
              marginLeft: vScale(20),
              marginRight: vScale(20),
              height: vScale(46),
              fontSize: 20,
              color: '#FFFFFF',
              marginTop: vScale(10),
              fontFamily: 'GoogleSans',
            }}>??ng Nh?p</Text>
          </TouchableOpacity>
      </View>
    );
  }
}

Answer 1

import React, { Component } from 'react';
import {
  Text,
  Alert,
  TouchableOpacity,
  Button,
  TextInput,
  View,
  StyleSheet,
} from 'react-native';
import { hScale, vScale, fScale } from "react-native-scales";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: {
        username: null,
        email: null,
        password: null,
        confirm_password: null,
      },
      errors: {
        username: null,
        email: null,
        password: null,
        confirm_password: null,
      },
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit = (event) => {
    //event.preventDefault();

    if (this.validate()) {
      alert('ok');
      console.log(this.state);

       this.setState((prevState) => {
              let input = Object.assign({}, prevState.input);
              input.username = null;
              input.password = null;
              input.email = null;
              input.confirm_password = null;
              return { input };
       });
         this.setState((prevState) => {
              let errors = Object.assign({}, prevState.errors);
              errors.username = null;
              errors.password = null;
              errors.email = null;
              errors.confirm_password = null;
              return { errors };
       });

      alert('?? ??ng Ky');
    }
  }

  validate = () =>{
    let input = this.state.input;
    let errors = {};
    let isValid = true;

    if (!input.username) {
      isValid = false;
      this.setState((prevState) => {
        let errors = Object.assign({}, prevState.errors);
        errors.username = 'Xin Nh?p Tên Ng??i Dùng.';
        return { errors };
      });
    }

    if (!input.email) {
      isValid = false;
      this.setState((prevState) => {
        let errors = Object.assign({}, prevState.errors);
        errors.email = 'Xin Nh?p ??a Ch? Email';
        return { errors };
      });
    }

    if (!input.password) {
      isValid = false;
      this.setState((prevState) => {
        let errors = Object.assign({}, prevState.errors);
        errors.password = 'Xin Nh?p M?t Kh?u.';
        return { errors };
      });
    }

    if (!input.confirm_password) {
      isValid = false;
      this.setState((prevState) => {
        let errors = Object.assign({}, prevState.errors);
        errors.password = 'Please enter your confirm password.';
        return { errors };
      });
    }

    if (input.username) {
      const re = /^S*$/;
      if (input.username.length < 6 || !re.test(input.username)) {
        isValid = false;
        this.setState((prevState) => {
          let errors = Object.assign({}, prevState.errors);
          errors.username = 'Xin Nh?p Tên ng??i Dùng Nh? H?n 6 Ky T?.';
          return { errors };
        });
      }
    }

    if (input.email) {
      let pattern = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
      if (!pattern.test(input.email)) {
        isValid = false;
        this.setState((prevState) => {
          let errors = Object.assign({}, prevState.errors);
          errors.email = 'Xin Nh?p ??a Ch? Email Chính Xác.';
          return { errors };
        });
      }
    }

    if (input.password) {
      if (input.password.length < 6) {
        isValid = false;

        this.setState((prevState) => {
          let errors = Object.assign({}, prevState.errors);
          errors.password = 'Xin Nh?p M?t Kh?u Nh?t 6 Ky T?.';
          return { errors };
        });
      }
    }

    if (input.password && input.confirm_password) {
      if (input.password != input.confirm_password) {
        isValid = false;
        this.setState((prevState) => {
          let errors = Object.assign({}, prevState.errors);
          errors.confirm_password = 'M?t Kh?u Kh?ng Trùng Kh?p.';
          return { errors };
        });
      }
    }

    return isValid;
  }

  render() {
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <View style={{padding:5}}>
        <TextInput
          value={this.state.input.username}
          onChangeText={(text) => {
            this.setState((prevState) => {
              let input = Object.assign({}, prevState.input);
              input.username = text;
              return { input };
            });
          }}

          placeholder={'Tên ??ng Nh?p'}
          blurOnSubmit={false}
          returnKeyType="next"
          onSubmitEditing={() => {
            this.secondTextInput.focus();
          }}
          id="username"
          name="username"
        />{this.state.errors.username? <Text>{this.state.errors.username}</Text>:null}
        <TextInput
          value={this.state.input.email}

          onChangeText={(text) => {
             this.setState((prevState) => {
              let input = Object.assign({}, prevState.input);
              input.email = text;
              return { input };
            });
          }}
          placeholder={'Email'}
          onSubmitEditing={() => {
            this.thirdTextInput.focus();
          }}
          ref={(input) => {
            this.secondTextInput = input;
          }}
          returnKeyType="next"
          blurOnSubmit={false}
          id="email"
        />{this.state.errors.email? <Text>{this.state.errors.email}</Text>:null}
        <TextInput
          value={this.state.input.password}

          onChangeText={(text) => {
             this.setState((prevState) => {
              let input = Object.assign({}, prevState.input);
              input.password = text;
              return { input };
            });
          }}
          placeholder={'M?t Kh?u'}
          secureTextEntry={true}
          onSubmitEditing={() => {
            this.fourTextInput.focus();
          }}
          ref={(input) => {
            this.thirdTextInput = input;
          }}
          returnKeyType="next"
          blurOnSubmit={false}
          id="password"
        />{this.state.errors.password? <Text>{this.state.errors.password}</Text>:null}
        <TextInput
          value={this.state.input.confirm_password}

          onChangeText={(text) => {
            this.setState((prevState) => {
              let input = Object.assign({}, prevState.input);
              input.confirm_password = text;
              return { input };
            });
          }}
          placeholder={'Xác Nh?n M?t Kh?u'}
          secureTextEntry={true}
          ref={(input) => {
            this.fourTextInput = input;
          }}
          onSubmitEditing={e=>{this.validate()}}
          returnKeyType="go"
          id="confirm_password"
        />{this.state.errors.confirm_password? <Text>{this.state.errors.confirm_password}</Text>:null}
        <TouchableOpacity
          onPress={(e)=>{this.handleSubmit(e);}}
          style={{
            borderRadius: vScale(50),
            backgroundColor: '#0260AF',
            marginTop: vScale(50),
            alignItems: 'center',
            justifyContent: 'center',
            marginLeft: vScale(20),
            marginRight: vScale(20),
          }}>
          <Text
            style={{
              marginLeft: vScale(20),
              marginRight: vScale(20),
              height: vScale(46),
              fontSize: 20,
              color: '#FFFFFF',
              marginTop: vScale(10),
              fontFamily: 'GoogleSans',
            }}>
            ??ng Nh?p
          </Text>
        </TouchableOpacity>
        </View>
      </View>
    );
  }
}