Могу ли я автофокусироваться на первом поле в редукционной форме, созданной с помощью цикла?

Я создал компонент React, используя избыточную форму, и ищу автофокусировку в первом поле. Поля создаются путем перебора объекта и создания поля для каждого элемента этого объекта. Когда я использую autoFocus в JSX, автофокусируется на последнем поле в форме (что имеет смысл).

Кто-нибудь знает, как я могу автофокусироваться на первом поле в форме?

Вот мой компонент:

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;

Заранее спасибо :)


reactjs focus forms redux-form autofocus
person Sawdust    schedule 04.08.2017    source источник
comment
Как это сделать. Если мы нажмем кнопку, появится форма, которая динамически добавит фокус на первое поле. Она отлично работает с индексом 1, а не с индексом 0. Пожалуйста, посоветуйте @Alexander   -  person Madhur    schedule 22.08.2019

Ответы (5)


arrow_upward
3
arrow_downward

Решением этой проблемы было условное отображение поля формы. Спасибо Александру Бородину за вдохновение...

{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>
                )
              })}
person Sawdust    schedule 04.08.2017
comment
Может ли это быть короче? Нам не нужно дублировать код компонента Field. Что-то вроде этого: ‹Имя поля={this.props.accounts[key].name} компонент=тип ввода=число заполнитель= {(i===0) ? автофокус:} /› - person TariqN; 05.08.2017
comment
Я пробовал это, но это не скомпилировалось - person Sawdust; 05.08.2017
comment
Может быть, в любом случае ваше решение выглядит хорошо. (Я) - person TariqN; 05.08.2017
comment
Как это сделать. Если мы нажмем кнопку, появится форма, которая динамически добавит фокус на первое поле. Она отлично работает с индексом 1, а не с индексом 0. Пожалуйста, посоветуйте @Alexander - person Madhur; 22.08.2019

arrow_upward
2
arrow_downward

Некоторые из них либо не скомпилировались, либо слишком многословны. Это сработало для меня:

    {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>
    )}
person whatever    schedule 17.10.2017

arrow_upward
1
arrow_downward

В качестве альтернативы, если вы подключитесь к ComponentDidMount, вы можете попросить DOM сфокусировать первое существующее поле в форме.

  1. Добавить ссылку в форму

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

  2. Используйте ссылку, чтобы сфокусировать элемент после монтажа

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

person veratti    schedule 04.08.2017

arrow_upward
0
arrow_downward

Попробуй это:

          {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>
            )
          })}
person Alex Borodin    schedule 04.08.2017
comment
Это не сработало, но я воспользовался этой идеей, чтобы условно отображать поле формы на основе значения i. Спасибо за идею! Я опубликую свое решение ниже - person Sawdust; 04.08.2017
comment
Как это сделать. Если мы нажмем кнопку, появится форма, которая динамически добавит фокус на первое поле. Она отлично работает с индексом 1, а не с индексом 0. Пожалуйста, посоветуйте @Alexander - person Madhur; 22.08.2019

arrow_upward
0
arrow_downward

Я столкнулся с проблемой, когда autoFocus неправильно передавался от поля к базовому компоненту. Пришлось явно передать autoFocus в реквизите props для поля.

person Kurt Furbush    schedule 05.07.2018