用于处理密码验证、登录和电子邮件验证的单一文本输入组件

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

不幸的是，这种方式让我有几个 re-rendering 相同的组件，或者只在用户名字段中写入来更改密码字段的样式。

上面的说法有点乱。您是想说，当您 enter/type 在用户名字段中时，您的密码字段会更改样式吗？

哦，顺便说一句，您的以下代码有误。我想密码字段的 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>
    )

也许如果你能对你的问题或你的代码给出更多的描述，那么我也许能提供帮助。

Answer 2

我想经过几次尝试我得到了答案。这是我的解决方案：

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;

用于处理密码验证、登录和电子邮件验证的单一文本输入组件

Single textinput component to handle password validation, login and email validation

reactjs

validation

react-native

login