React Native - Как проверить правильность Textinput? - PullRequest
Новая
       33

React Native - Как проверить правильность Textinput?

0 голосов
/ 03 января 2019

Как проверить корректность Textinput?Я хочу правильно проверить свою форму с помощью пользовательской проверки формы и после проверки отобразить ошибки в текстовом компоненте, но как?Пожалуйста, ребята, покажите мне пример!

Ответы [ 3 ]

0 голосов
/ 03 января 2019

Каждое поле, вы должны сделать сравнение и показать сообщение об ошибке, и, как я вижу, нет прямой проверки формы, даже если есть компонент формы, доступный в реагировать нативно. В одном из моих собственных проектов реагирования я добавил форму, а затем, нажав «Отправить», я написал одну функцию проверки для проверки всех моих входных данных. Для этого я использовал одну хорошую библиотеку JavaScript библиотека npm - валидатор

А для отображения сообщения об ошибке вы можете использовать, Toast, ALert или Snackbar

0 голосов
/ 17 января 2019

Было бы неплохо, если бы вы представили некоторые мысли или код о том, как вы думаете, к нему можно подойти.Но способ, которым я это сделал, был довольно прост, в моем состоянии компонента я получил следующий объект: 

this.state = {
        loading: false,
        username: {
            text: '',
            valid: false
        },
        password: {
            text: '',
            valid: false
        },
        isLoginValid: false
    };

Затем в TextInput для имени пользователя, я бы сначала связал его значение с this.state.username.text, также,во время onChangeText я просто делаю простую проверку поля, если форма довольно большая, у вас может быть switch(fieldtype) где у вас есть для каждого поля, какой метод обработки вы хотите применить, также как и подтверждение.

onChangeText={ (text) => { this.validateInput(text, 'username')}} (username будет вводом формы для объекта состояния)

Например, для имени пользователя вы хотите, чтобы длина была только длина! = 0 и длина <= 8 символов, для электронной почты вы можете запустить RegExp () спроверка адреса электронной почты, а также его длина, для пароля другая логика и т. д. ... после этого я просто сохраняю состояние для ввода этого поля и, если оно действительно или нет.Например: </p> 

validateInput(text, fieldname) {
    let stateObject = {
        text: text,
        valid: text.length !== 0
    }

    this.setState({ [fieldname]: stateObject }, () => {
        this.checkValidation();
    });
}

В checkValidation я проверяю все поля ввода и, если все поля действительны, я устанавливаю для formValid значение true.Этот formValid, например, позволит пользователю нажать на кнопку «Войти», в противном случае он применяет к нему непрозрачность 0,5 и отключает ее.

Остальное, как вы можете догадаться, это просто игра с действительными переменнымикаждого поля, что вы хотите отобразить, а что нет.В форме регистрации я также добавил значок X или «Tick», если введенное текстовое поле в порядке или нет.Пусть ваше воображение направляет вас.

Надеюсь, это поможет.

0 голосов
/ 03 января 2019

установить act-native-snackbar для отображения сообщений об ошибках. 

 import React, { Component } from 'react';
    import { View, Text, TextInput } from 'react-native';
    import Snackbar from 'react-native-snackbar';

    export default class LoginPasswordScreen extends Component {
        constructor(props) {
            super(props);

            this.state = {
                password: ''
            }
        }

        validate = () => {
            //include your validation inside if condition
            if (this.state.password == "") {
                () => {
                    setTimeout(() => {
                        Snackbar.show({
                            title: 'Invalid Credintials',
                            backgroundColor: red,
                        })
                    }, 1000);
                }
            }
            else {
                Keyboard.dismiss();
                // navigate to next screen
            }
        }

        render() {
            return (
                <View>
                    <TextInput
                        returnKeyType="go"
                        secureTextEntry
                        autoCapitalize="none"
                        autoCorrect={false}
                        autoFocus={true}
                        onChangeText={(password) => this.setState({ password })}
                    />
                    <TouchableOpacity>
                        <Text onPress={this.validate}>Next</Text>
                    </TouchableOpacity>
                </View>
            );
        }
    }
...