Автофокус в реакции на основе условия, если еще

Question

Как автоматически сфокусироваться на вводимом имени в зависимости от того, существует этот 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" />

Я думал об использовании ссылок, но мне интересно, есть ли лучший способ получить доступ к имени ввода

Answer 1

Вы можете попробовать это

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

Answer 2

Оформить заказ в этой песочнице

Это не использует if-else, но использует this.props.email, как в вашем вопросе:

Как автоматически сфокусироваться на вводимом имени в зависимости от того, существует этот this.props.email или нет?

---

Внутри Input.js (компонент)

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

Внутри index.js (родитель)

<Input email={""} />

Answer 3

Вы могли бы просто использовать autofocus:

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

Или с ссылками:

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}} />