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

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