J'ai trois champs de mot de passe, chacun a une icône en forme d'œil pour permettre au consommateur d'afficher / masquer le mot de passe,
J'essaie avec le code ci-dessous, mais si je clique sur masquer / afficher pour un champ, cela affecte d'autres champs
Veuillez me guider avec un exemple de correction du code ci-dessous
class ShowPassword extends React.Component{
constructor(props){
super(props);
this.state = {
type: 'input',
score: 'null'
}
this.showHide = this.showHide.bind(this);
}
showHide(e){
//e.preventDefault();
//e.stopPropagation();
this.setState({
type: this.state.type === 'input' ? 'password' : 'input'
})
}
render(){
return(
<div>
<label className="password">Current Password
<input type={this.state.type} className="password__input"/>
<span className="password__show" onClick={this.showHide}>{this.state.type === 'input' ? 'Hide' : 'Show'}</span>
</label>
<label className="password">New Password
<input type={this.state.type} className="password__input"/>
<span className="password__show" onClick={this.showHide}>{this.state.type === 'input' ? 'Hide' : 'Show'}</span>
</label>
<label className="password">Confirm Password
<input type={this.state.type} className="password__input"/>
<span className="password__show" onClick={this.showHide}>{this.state.type === 'input' ? 'Hide' : 'Show'}</span>
</label>
</div>
)
}
}
ReactDOM.render(<ShowPassword/>, document.getElementById('react'));
Voici le lien jsbin pour jouer avec
3 Réponses :
lorsque vous définissez l'état, toutes les entrées sont rendues par la nouvelle valeur de type que vous fournissez à this.state.type
vous devez supprimer type = {this.state.type} pour les entrées que vous ne voulez pas prendre en compte par le bouton afficher / masquer simplement utiliser type = "password"
Extrayez votre champ de saisie dans son propre composant
class PasswordField extends React.Component{
state = {
type: 'text',
}
handleClick = () => this.setState(({type}) => ({
type: type === 'text' ? 'password' : 'text'
}))
render() {
const { label } = this.props
return (
<label className="password">{label}
<input type={this.state.type} className="password__input"/>
<span className="password__show" onClick={this.handleClick}>{this.state.type === 'text' ? 'Hide' : 'Show'}</span>
</label>
)
}
}
Une autre chose que je voudrais mentionner ici, c'est qu'il n'y a pas de type d'entrée de input . Par conséquent, je l'ai remplacé par la valeur valide text.
Chacun de vos champs de mot de passe doit avoir son propre état contenant un staing booléen s'ils sont masqués ou affichés. Pour éviter les répétitions de code, créez un composant pour vos mots de passe.
Exemple pratique:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.production.min.js"></script> <form id="react"></form>
$accent: #00BCD4;
$primary: #212121;
$secondary: #727272;
$scoreRed: #F44336;
$scoreYellow: #FFEB3B;
$scoreGreen: #4CAF50;
body, html{
height: 100%;
}
body{
background: linear-gradient(#607D8B, #455A64);
font-family: 'Roboto', sans-serif;
}
form{
margin: 3em auto;
max-width: 320px;
background: #FFFFFF;
padding: 40px;
box-shadow: 0 0 20px rgba(0,0,0,.25);
}
.password{
display: block;
position: relative;
text-transform: uppercase;
font-weight: 700;
width: 100%;
color: $secondary;
&__input{
display: block;
text-transform: none;
width: 100%;
height: 42px;
border-width: 0 0 1px;
border-style: solid;
border-color: #B6B6B6;
font-weight: 400;
color: $primary;
&:focus, &:active{
border-color: $accent;
outline: 0;
}
}
&__show{
cursor: pointer;
position: absolute;
bottom: 11px;
height: 16px;
right: 0;
background: $secondary;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-weight: 700;
font-size: .8em;
}
&__strength{
position: absolute;
width: 0%;
height: 4px;
bottom: -8px;
left: 0;
background: transparent;
transition: all 300ms ease-in-out;
&[data-score="null"]{
width: 0;
background: red;
}
&[data-score="0"]{
width: 5%;
background: $scoreRed;
}
&[data-score="1"]{
width: 25%;
background: $scoreRed;
}
&[data-score="2"]{
width: 50%;
background: $scoreYellow;
}
&[data-score="3"]{
width: 75%;
background: $scoreGreen;
}
&[data-score="4"]{
width: 100%;
background: $scoreGreen;
}
}
}
class ShowPassword extends React.Component {
constructor(props) {
super(props);
this.state = {
score: 'null'
}
}
render() {
return (
<div>
<PasswordField title='Current Password'/>
<PasswordField title='New Password' />
<PasswordField title='Confirm Password' />
</div>
)
}
}
class PasswordField extends React.Component {
constructor(props) {
super(props)
this.state = {
hide: true
}
}
hideSwitch = ev => {
this.setState({ hide: !this.state.hide })
}
render() {
const { title } = this.props
const { hide } = this.state
return (
<label className="password">{title}
<input type={hide ? 'password' : 'input'} className="password__input" />
<span className="password__show" onClick={this.hideSwitch}>{hide ? 'Show' : 'Hide'}</span>
</label>
)
}
}
ReactDOM.render(<ShowPassword/>, document.getElementById('react'));