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

不幸的是，这种方式使我不得不对同一组件进行多次重新渲染，或者仅在用户名字段中写入即可更改密码字段的样式。

上面的陈述有点令人困惑。您是否要说在输入/输入用户名字段时，您的密码字段会更改样式？

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

单个textinput组件可处理密码验证，登录和电子邮件验证

2 个答案: