1
votes

autofocus en réaction en fonction de la condition sinon

Comment faire la mise au point automatique pour le nom d'entrée en fonction de l'existence ou non de this.props.email?

if(this.props.email){
    // would like to set autofocus for  <input value={email} name="userName">    
}else{
   // would like to set autofocus for  <input name="password" />
}

 <input value={email} name="userName">             
 <input name="password" />

Je pensais utiliser des refs mais je me demandais s'il existe un meilleur moyen d'accéder au nom de l'entrée

reactjs autofocus refs

0 commentaires

3 Réponses :

1
votes

Vous pouvez simplement utiliser autofocus:

if(this.props.email){
    // would like to set autofocus for  <input value={email} name="userName">  
    this.emailInput.focus()  
}else{
    // would like to set autofocus for  <input name="password" />
    this.passwordInput.focus()
}

 <input value={email} name="userName" ref={input => {this.emailInput = input}}>             
 <input name="password" ref={input => {this.passwordInput = input}} />

Ou, avec des références:

<input value={email} name="userName" autofocus={!!this.props.email} >             
<input name="password" autofocus={!this.props.email} />

0 commentaires

3
votes

vous voudrez peut-être essayer ceci

<input value={email} autoFocus={this.props.email} name="userName">

4 commentaires

N'est-il pas préférable d'utiliser !! this.props.email?

que signifie !! this.props.email? est-ce la même chose que {this.props.email}?

{this.props.email} et {!! this.props.email} fonctionnent mais je me demandais quelle est la différence entre {this.props.email} et {{!! this.props.email}}? {{!! this, props.email}} fonctionne pour le courrier électronique est une casse non définie mais pas {this.props.email}}?

Désolé pour le retard, mais c'est vrai, !! this.props.email couvre un cas indéfini, cela n'a peut-être pas d'importance ici, mais dans l'ensemble, il est préférable de l'utiliser pour la sécurité.

1
votes

Découvrez ce Sandbox

Cela n'utilise pas if-else strong>, mais utilise this.props.email , comme dans votre question:

Comment effectuer une mise au point automatique pour le nom d'entrée en fonction de l'existence ou non de this.props.email?

Dans Input.js (composant)

<Input email={""} />

Dans index.js (parent)

<input
  value={this.props.email}
  name="userName"
  autoFocus={this.props.email}
/>
<input name="password" autoFocus={!this.props.email} />

0 commentaires