Lorsque l'utilisateur clique sur l'icône en forme d'œil du nouveau mot de passe, l'utilisateur peut uniquement basculer (afficher ou masquer) la vue du nouveau champ de mot de passe. Le problème est qu'il change de vue pour les nouveaux mots de passe et pour confirmer le mot de passe. Comment basculer la vue de l'icône en forme d'œil entre un champ particulier uniquement pas pour les deux champs.
export default class ResetPassword extends React.Component {
constructor(props) {
super(props)
this.state = {
secure: true,
newPassword: '',
confirmPassword: ''
}
}
togglePassword = () => {
this.setState(prevState => ({ secure: !prevState.secure }))
}
render() {
return (
<ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
<CommonBackground
heading='Reset' />
<Field
label='New password'
placeholder='Enter new password'
secure={this.state.secure}
icon
onChangeText={newPassword => this.setState({ newPassword })}
value={this.state.newPassword}
action={this.togglePassword} />
<Field
label='Confirm password'
placeholder='Enter password again'
secure={this.state.secure}
icon
onChangeText={confirmPassword => this.setState({ confirmPassword })}
value={this.state.confirmPassword}
action={this.togglePassword} />
</ScrollView>
);
}
}
ResetPassword.navigationOptions = {
header: null
}
export const Field = ({
label,
placeholder,
onChangeText,
secure,
icon,
value,
action
}) => (
<View style={styles.fieldWrapper}>
<Text style={styles.heading}>{label}</Text>
<View style={styles.iconWrapper}>
<TextInput
secureTextEntry={secure}
style={styles.input}
onChangeText={onChangeText}
placeholder={placeholder}
value={value} />
{icon ? (
<TouchableOpacity
onPress={action}
underlayColor='transparent'>
{!secure ? <EyeView height={30} width={30} /> : <EyeHide height={30} width={30} />}
</TouchableOpacity>
) : null}
</View>
</View>
)
3 Réponses :
Vous semblez utiliser la même variable d'état "sécurisé" pour les deux champs. Par conséquent, le basculement d'un champ affecte les deux.
Utilisez des champs d'état différents pour le mot de passe et confirmPassword,
togglePassword = () => {
this.setState(prevState => ({ passwordSecure: !prevState.passwordSecure }))
}
toggleConfirmPassword = () => {
this.setState(prevState => ({ confirmPasswordSecure: !prevState.confirmPasswordSecure})
}
Soit vous avez 2 gestionnaires de bascule séparés,
this.state = {
// Other fields can be the same.
passwordSecure: true,
confirmPasswordSecure: true
}
Ouais, je peux faire ça. Mais ne voulez pas créer des états et fonctionner pour chaque champ. Pouvez-vous me dire comment puis-je utiliser un objet événement avec l'état précédent?
J'espère que cela vous aidera:
J'ai mis à jour la réponse pour travailler avec le champ commun pour les deux entrées:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root" />
class App extends React.Component{
constructor(props){
super(props);
this.state = {
secure: true,
showConfirmPwd: false,
showPwd: false
}
this.handleItemClick = this.handleItemClick.bind(this)
}
handleItemClick(name){
switch(name){
case 'pwd':
this.setState({showPwd: !this.state.showPwd});
break;
case 'confirmPwd':
this.setState({showConfirmPwd: !this.state.showConfirmPwd});
break;
default:
return;
}
}
render(){
let { secure, showConfirmPwd, showPwd } = this.state;
return(
<div>
<Field handleItemClick={this.handleItemClick} showPwd={showPwd} switchKey="pwd" placeholder="password" />
<Field handleItemClick={this.handleItemClick} switchKey="confirmPwd" showConfirmPwd={showConfirmPwd} placeholder="confirm password" />
</div>
)
}
}
const Field = ({ showPwd, showConfirmPwd, placeholder, handleItemClick, switchKey }) => {
return(
<div>
<input type={(showConfirmPwd || showPwd)? "text": "password" } placeholder={placeholder} />
<span onClick={() => handleItemClick(switchKey)}> eye </span>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'));
J'utilise une entrée de texte d'élément natif react qui n'a pas de paramètre «type». J'attends une solution plus courte avec un objet événement.
@MonikaRangta Okay react-native TextInput est avec l'option 'textContentType' en remplacement de 'type'
constructor(props) {
super(props)
this.state = {
passwordSecure: true,
confirmPasswordSecure: true,
newPassword: '',
confirmPassword: ''
}
}
togglePassword = (secure) => {
this.setState(prevState => ({ [secure]: !prevState[secure] }))
}
render(){
return(
<div>
<Field
label='New password'
placeholder='Enter new password'
secure={this.state.passwordSecure}
icon
onChangeText={newPassword => this.setState({ newPassword })}
value={this.state.newPassword}
action={() => this.togglePassword('passwordSecure')}
type='newPassword' />
<Field
label='Confirm password'
placeholder='Enter password again'
type='newPassword'
secure={this.state.confirmPasswordSecure}
icon
onChangeText={confirmPassword => this.setState({ confirmPassword })}
value={this.state.confirmPassword}
action={() => this.togglePassword('confirmPasswordSecure')} />
</div>
)
}
}
export const Field = ({
label,
placeholder,
onChangeText,
secure,
type,
icon,
value,
action
}) => (
<View style={styles.fieldWrapper}>
<Text style={styles.heading}>{label}</Text>
<View style={styles.iconWrapper}>
<TextInput
secureTextEntry={secure}
style={styles.input}
onChangeText={onChangeText}
placeholder={placeholder}
textContentType={type}
value={value} />
{icon ? (
<TouchableOpacity
onPress={action}
underlayColor='transparent'>
{!secure ? <EyeHide height={30} width={30} /> : <EyeView height={30} width={30} />}
</TouchableOpacity>
) : null}
</View>
</View>
)
C'est ainsi que je le fais fonctionner en passant un paramètre dans la fonction.
utilisez une variable d'état différente pour les champs de bot, cela résoudra le problème.
Ouais, je peux faire ça. Mais ne voulez pas créer des états et fonctionner pour chaque champ. Pouvez-vous me dire comment puis-je utiliser un objet événement avec l'état précédent?
voir l'exemple - vous avez un interrupteur et 4 ampoules, ces ampoules sont connectées via 1 interrupteur - si nous sommes sur l'interrupteur, 4 ampoules s'allumeront. la même chose se passe ici, vous avez une seule variable et 2 champs, si vous changez la variable - 2 champs seront affectés.