Единый компонент ввода текста для обработки проверки пароля, входа в систему и проверки электронной почты

Question

Вопрос

Благодаря реквизитам я могу создать отдельный пользовательский компонент textInput для обработки разных проверок?

Код

Внизу вы найдете главный экран входа в систему, он действительно прост и состоит из 2 текстовых вводов.

import React, { PureComponent, } from 'react';
import { View } from 'react-native';
import MkTextInput from '../../components/MkTextInput'


class LoginScreen extends PureComponent {
  state = {
    username: '',
    password: '',
  }

  textChanged = fieldName => newValue => this.setState({ [fieldName]: newValue });

  render() {

    const { username } = this.state;

    return(
      <View>
        <MkTextInput placeholderName='Username' usernameValidation value={username} onChangeText={this.textChanged('username')}/>
        <MkTextInput placeholderName='Password' passwordValidation value={username} onChangeText={this.textChanged('password')} />
      </View>
    )
  }
}

export default LoginScreen;

Ниже здесь находится MkTextInputComponent

import React, { PureComponent, Fragment } from 'react';
import { Item, Input, Icon } from 'native-base';
import { userValidation, isTooShort } from '../utils/Validations/UserAndPassValidation';
import { passwordValidator } from '../utils/Validations/PasswordValidation';
import { styles } from './styles';

//ricorda di tradurre tutti i path in path assoluti -->leggi la documentazione.

class MkTextInput extends PureComponent {
  state = {
    data: '',
  }

  render() {
    const { placeholderName, 
            usernameValidation, 
            passwordValidation, 
            emailValidation, 
            onChangeText, 
            value,

          } = this.props;

    const checkedUsername = usernameValidation ? userValidation(value) : false;
    const checkedPassword = passwordValidation ? passwordValidator (value) : false;

    return (
      <Fragment>
        <Item style={styles.container}>
          <Input placeholder={placeholderName} 
              onChangeText={onChangeText}  
              secureTextEntry={checkedUsername? true : false}
              style={checkedUsername ? styles.success : styles.failed}
              />
          <Icon name={checkedUsername ? 'checkmark-circle' : 'close-circle'}/>
        </Item>
      </Fragment>
    );
  }
}

export default MkTextInput;

План

Моим первым намерением было установить указанное поведение на основена реквизитах, которые получат компоненты MkTextInput: Если у вас есть реквизит «passwordValidation», компонент выполнит проверку строки с этой строкой кода и проигнорирует оставшуюся проверку.

    const checkedPassword = passwordValidation ? passwordValidator (value) : false;

, к несчастью,этот способ приводит меня к нескольким повторным рендерингам одного и того же компонента или изменяет стиль поля пароля, просто записывая его в поле имени пользователя.

Есть способ заставить вещи работать?

Answer 1

Я думаю, что после нескольких попыток я получил ответ. Вот мое решение:

Login component: 

import React, { PureComponent, } from 'react';
import { View } from 'react-native';
import MkTextInput from '../../components/MkTextInput'


class LoginScreen extends PureComponent {
  state = {
    username: '',
    password: '',
    email: '',
  }

  textChanged = fieldName => newValue => this.setState({ [fieldName]: newValue });

  render() {

    const { username, password, email } = this.state;

    return(
      <View>
        <MkTextInput placeholderName='Username' usernameValidation value={username} onChangeText={this.textChanged('username')} />
        <MkTextInput placeholderName='Password' passwordValidation value={password} onChangeText={this.textChanged('password')} />
        <MkTextInput placeholderName='E-mail' emailValidation value={email} onChangeText={this.textChanged('email')} />
      </View>
    )
  }
}

export default LoginScreen;

А внизу вы найдете компонент MkTextInput

import React, { PureComponent } from 'react';
import { Item, Input, Icon } from 'native-base';
import { usernameValidator, passwordValidator, emailValidator } from '../utils/Validations';
import { styles } from './styles';
//ricorda di tradurre tutti i path relativi in path assoluti -->leggi la documentazione.

class MkTextInput extends PureComponent {
  state = {
    data: '',
  }

  render() {
    const { placeholderName, 
            usernameValidation, 
            passwordValidation, 
            emailValidation, 
            onChangeText, 
            value,
          } = this.props;

    const checkedUsername = usernameValidator(value) ? <Icon name='checkmark-circle'/> : !value || (value !== null && <Icon name='close-circle'/>);
    const checkedPassword = passwordValidator(value) ? <Icon name='checkmark-circle' /> : !value || (value !== null && <Icon name='close-circle'/>);
    const checkedEmail = emailValidator(value) ? <Icon name='checkmark-circle' /> : !value || (value !== null && <Icon name='close-circle' />); 

    return (
        <Item style={styles.inputContainer}>
          <Input placeholder={placeholderName || ''} 
              onChangeText={onChangeText}
              autoCapitalize='none'
              secureTextEntry={passwordValidation ? true : false}
              />
          {usernameValidation ? checkedUsername : null}
          {passwordValidation ? checkedPassword : null}
          {emailValidation ? checkedEmail : null}
        </Item>
    );
  }
}

export default MkTextInput;

Answer 2

, к несчастью, этот способ приводит меня к нескольким повторным рендерингам одного и того же компонента или к изменению стиля поля пароля, просто записывая только поле имени пользователя.

Вышеприведенное утверждение немного сбивает с толку. Вы пытаетесь сказать, что при вводе / вводе в поле имени пользователя ваше поле пароля меняет стили?

Да, и между прочим, ваш код ниже содержит ошибку. Я думаю, value реквизиты поля пароля должны быть value={password} вместо value={username}

return(
      <View>
        <MkTextInput placeholderName='Username' usernameValidation value={username} onChangeText={this.textChanged('username')}/>
        <MkTextInput placeholderName='Password' passwordValidation value={password} onChangeText={this.textChanged('password')} />
      </View>
    )

Может быть, если вы можете дать немного больше описания того, что именно вы застряли или ваш код, то, возможно, я смог бы помочь.