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

Question

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

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 关键字创建的内部函数是未定义的，这就是你面临的问题，你有两个选择

1. 使用 .bind() 函数 this.validatePinConfirmation.bind(this)

2. 使用箭头函数，例如 validatePinConfirmation 应该定义为流

   validatePinConfirmation = (text) => { /* 你的代码 */} // 这里的 this 不是未定义的，因为箭头函数保留了封闭词法上下文的 this 的值

您可以从blog post获得更多相关信息

Answer 3

除了其他建议修复您的支票

if ({ emailValidate: true }) {

这总是被执行，因为任何对象都被转换为布尔值true。 我相信你需要检查类似的东西

if (this.state.emailValidate) {

但这实际上不起作用，因为.setState() 是async operation。即：调用.setState 不会立即改变状态。 所以你最好引入中间变量并检查它：

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