Question

我正在注册表中建立一个引脚验证，以检查第一个引脚是否与第二个引脚匹配。我创建了一个validatePinConfirmation函数，该函数检查pin是否等于pin_confirmation。如果是，那么我们将pin_confirmation的状态设置为用户插入的值。由于某种原因，该函数或表单未传递值并将其保存到DB。如果有人能指出我在做什么错，我将不胜感激。

import React, { Component } from 'react';
import { View, AsyncStorage } from 'react-native';
import { Form, Item, Input, Label, Button, Text } from 'native-base';
import axios from 'axios';
import { JWT } from 'App';

class RegistrationForm extends Component {
	constructor(props) {
		super(props);
		this.state = {
			name: '',
			email: '',
			emailValidate: '',
			pin: '',
			pinValidate: '',
			role: 'Consumer',
			pin_confirmation: ''
		};
	}

	validateEmail(text, type) {
		alph = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g;
		if (type == 'email') {
			if (alph.test(text)) {
				this.setState({ emailValidate: true });
			} else {
				this.setState({ emailValidate: false });
			}
		}
		if ({ emailValidate: true }) {
			this.setState({ email: text });
		}
	}

	validatePinConfirmation(text) {
		const { pin, pin_confirmation } = this.state;
		if (text == pin) {
			this.setState({ pinValidate: true });
		} else {
			this.setState({ pinValidate: false });
		}
		if ({ pinValidate: true }) {
			this.setState({ pin_confirmation });
		}
	}

	onSubmit = () => {
		const { name, email, pin, role, pin_confirmation } = this.state;
		axios
			.post('http://0.0.0.0:4000/api/v1/sign_up', {
				user: {
					name,
					email,
					pin,
					role,
					pin_confirmation
				}
			})
			.then(response => {
				AsyncStorage.setItem('JWT', response.data.jwt);
				console.log(response.data.jwt);
				this.props.navigation.navigate('Profile');
			})
			.catch(error => {
				console.log(error);
			});
	};

	render() {
		return (
			<View>
				<Form>
					<Item floatingLabel>
						<Label>Name</Label>
						<Input
							value={this.state.name}
							onChangeText={name => {
								this.setState({ name });
							}}
						/>
					</Item>
					<Item floatingLabel last>
						<Label>Email</Label>
						<Input
							autoCapitalize="none"
							value={this.state.email}
							onChangeText={text => this.validateEmail(text, 'email')}
						/>
					</Item>
					<Item floatingLabel last>
						<Label>Pin</Label>
						<Input
							keyboardType={'number-pad'}
							secureTextEntry
							value={this.state.pin}
							onChangeText={pin => {
								this.setState({ pin });
							}}
						/>
					</Item>
					<Item floatingLabel last>
						<Label>Pin Confirmation</Label>
						<Input
							keyboardType={'number-pad'}
							secureTextEntry
							value={this.state.pin_confirmation}
							onChangeText={text => this.validatePinConfirmation(text)}
						/>
					</Item>
				</Form>
				<Button onPress={this.onSubmit}>
					<Text> Submit</Text>
				</Button>
			</View>
		);
	}
}

export default RegistrationForm;

Answer 1

尝试以下操作：

<Input
    keyboardType={'number-pad'}
    secureTextEntry
    value={this.state.pin_confirmation}
    onChangeText={this.validatePinConfirmation.bind(this)}
/>

this的上下文超出了您要使用的范围。让我知道是否可行。您可能还需要对onSubmit做同样的事情。

Answer 2

此使用function关键字创建的内部函数未定义，这是您面临两个问题的问题

使用.bind（）函数this.validatePinConfirmation.bind（this）
使用箭头功能，例如validatePinConfirmation应该定义为流

validatePinConfirmation =（文本）=> {/ *您的代码* /} //这里不是未定义的，因为箭头功能保留了封闭词法上下文的this

您可以从此blog post

了解更多信息

Answer 3

除其他建议外，您的支票也有所修改

if ({ emailValidate: true }) {

由于所有对象都将转换为布尔值true，因此始终执行此操作。我相信您需要检查类似的内容

if (this.state.emailValidate) {

，但这实际上不起作用，因为.setState()是async operation。即：调用.setState不会立即更改状态。因此，您最好引入interm变量并进行检查：

let isEmailValid = true;
...
this.setState({emailValidate: isEmailValid});
if (isEmailValid) {
    this.setState({email: text});

React Native-表单字段验证：无法创建密码验证以进行密码确认

3 个答案: