未定义不是对象(评估"事件.目标名称"),当我尝试使注册验证表单反应本机时



undefined不是一个对象(正在评估"event.target-name"(,当我试图使注册验证的表单本地反应时这是我的代码,plzz帮助,非常感谢这是在线文件文档https://docs.google.com/document/d/1WeJtSFEV8zCCy5M_N1pN8SQUFMAmsoQ0-r36iDDunkM/edit?usp=sharing因为我不能上传我的代码不确定为什么

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 Ký');
}
}

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 Ký 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 Ký 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>
);
}
}
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 Ký');
}
}
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 Ký 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 Ký 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>
);
}
}

请尝试一下。

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: {
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 };
});
alert('Đã Đăng Ký');
}
}
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 Ký 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 Ký 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={Styles.container}>
<TextInput
value={this.state.input.username}
onChangeText={(text) => {
this.setState((prevState) => {
let input = Object.assign({}, prevState.input);
input.username = text;
return { input };
});
}}
style={Styles.title}
placeholder={'Tên Đăng Nhập'}
blurOnSubmit={false}
returnKeyType="next"
onSubmitEditing={() => {
this.secondTextInput.focus();
}}
id="username"
name="username"
/>
<TextInput
value={this.state.input.email}
style={Styles.title}
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"
/>
<TextInput
value={this.state.input.password}
style={Styles.title}
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"
/>
<TextInput
value={this.state.input.confirm_password}
style={Styles.title}
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;
}}
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>
);
}
}
<TextInput
value={this.state.input.username}
onChangeText={(text) => {
this.setState((prevState) => {
let input = Object.assign({}, prevState.input);
input.username = text;
return { input };
});
}}
style={Styles.title}
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}

所有相同

您必须通过;name";道具到您的TextInput组件,如下图所示:

<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"
name="username"
/>

对其余的TextInputs组件执行此操作。

此外,修复您的";handleChange";方法,像这样:

handleChange(event) {
this.setState({
input: {
[event.target.name]: event.target.value
}
});
}
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 Ký');
}
}
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 Ký 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 Ký 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;
}

使用此更新了您的代码。

试试这个

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 Ký');
}
}
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 Ký 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 Ký 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}}>
<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;
}}
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>
);
}
}

最新更新