ループを使用して作成されたredux-formの最初のフィールドでオートフォーカスできますか？

Question

私はredux-formを使ってReactコンポーネントを作成し、最初のフィールドでautoFocusを探しています。フィールドは、オブジェクトをループし、そのオブジェクトの各項目のフィールドを作成することによって作成されます。 JSFでautoFocusを使用すると、フォームの最後のフィールドにautoFocusが設定されます（これは意味があります）。

私はフォームの最初のフィールドにどのようにautoFocusできるのか知っていますか？ここで

は私のコンポーネントです：事前に

import React, { Component } from 'react'; 
import { Field, reduxForm } from 'redux-form'; 

class BalanceForm extends Component { 
    constructor(props) { 
    super(props); 
    this.submitForm = this.submitForm.bind(this); 
    this.cancel = this.cancel.bind(this); 
    } 
    cancel() { 
    //not relevant 
    } 
    submitForm(e, values) { 
    //not relevant 
    } 
    render() { 
    return (
     <div> 
     {this.props.balanceFormVisible && 
     <div className="modal-background"> 
      <div className="modal"> 
      <form onSubmit={this.submitForm}> 
       {Object.keys(this.props.accounts).map((key) => { 
       return (
        this.props.accounts[key].visible && 
        <div key={this.props.accounts[key].name}> 
        <label className="form-label" htmlFor={this.props.accounts[key].name}> 
         {this.props.accounts[key].display} 
        </label> 
        <Field 
         name={this.props.accounts[key].name} 
         component="input" 
         type="number" 
         placeholder="" 
         autoFocus 
        /> 
        </div> 
       ) 
       })} 
       <button type="submit">Submit</button> 
       <button onClick={ this.cancel } className="cancelbtn" >Cancel</button> 
      </form> 
      </div> 
     </div> 
     } 
     </div> 
    ); 
    } 
} 

BalanceForm = reduxForm({form: 'balance'})(BalanceForm) 

export default BalanceForm; 

感謝:)

Answer 1

ソリューションは条件付きでフォームフィールドをレンダリングすることでした。あなたはComponentDidMountに引っ掛けた場合のインスピレーションのためのアレクサンドル・ボロディンのおかげで...

{Object.keys(this.props.accounts).map((key, i) => { 
       console.log(key, i) 
       return (
        this.props.accounts[key].visible && 
        <div key={this.props.accounts[key].name}> 
        <label className="form-label" htmlFor={this.props.accounts[key].name}> 
         {this.props.accounts[key].display} 
        </label> 
        {(i === 0) ? (
         <Field 
         name={this.props.accounts[key].name} 
         component="input" 
         type="number" 
         placeholder="" 
         autoFocus 
         /> 
        ) : (
         <Field 
         name={this.props.accounts[key].name} 
         component="input" 
         type="number" 
         placeholder="" 
         /> 
        )} 
        </div> 
       ) 
       })} 

Answer 2

これを試してみてください。これに

  {Object.keys(this.props.accounts).map((key, i) => { 
      return (
       this.props.accounts[key].visible && 
       <div key={this.props.accounts[key].name}> 
       <label className="form-label" htmlFor={this.props.accounts[key].name}> 
        {this.props.accounts[key].display} 
       </label> 
       <Field 
        name={this.props.accounts[key].name} 
        component="input" 
        type="number" 
        placeholder="" 
        { (i === 0) ? 'autoFocus': ''} 
       /> 
       </div> 
      ) 
      })} 

Answer 3

あるいは、あなたは、フォーム内の最初の既存のフィールドを集中するためにDOMを求めることができます。

1. これらのいくつかは、いずれかの」didnの

   componentDidMount() { const firstInput = this.refs.form.querySelector('input')[0]; firstInput && firstInput.focus(); }

Answer 4

を実装した後の要素を集中することREFを使用して、フォームに

<form onSubmit={this.submitForm} ref='form'>

を参照を追加しますコンパイルするか、少し冗長です。

{Object.keys(item) 
     .map((key, i) => 
     <div className={`form-row ${key}`} key={key}> 
      <label>{key}</label> 
      <input value={item[key]} 
      type='text' 
      onChange={e => { 
      this._updateValue(key, e.target.value); 
      }} 
      autoFocus={i === 0} 
      /> 
     </div> 
    )}