我可以自动关注使用循环创建的 redux 表单中的第一个字段吗？

Question

我已经使用 redux-form 创建了一个 React 组件，并希望在第一个字段上自动对焦。这些字段是通过循环对象并为该对象中的每个项目创建一个字段来创建的。当我在 JSX 中使用 autoFocus 时，autoFocuses 在表单的最后一个字段上（这是有道理的）。

有谁知道如何在表单的第一个字段上自动对焦？

这是我的组件：

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

试试这个：

          {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 2

对此的解决方案是有条件地呈现表单字段。感谢 Alexander Borodin 的灵感...

{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 3

或者，如果您连接到 ComponentDidMount，您可以要求 DOM 聚焦表单中的第一个现有字段。

向表单添加引用

<form onSubmit={this.submitForm} ref='form'>
挂载后使用ref聚焦元素

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

Answer 4

其中一些无法编译或有点冗长。这对我有用：

    {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>
    )}

Answer 5

我运行遇到了一个问题，其中 autoFocus 没有正确地从 Field 向下传递到基础组件。必须在 Field 的 props 属性中显式传递 autoFocus。

我可以自动关注使用循环创建的 redux 表单中的第一个字段吗？

Can I autofocus on the first field in a redux-form created using a loop?

forms

focus

autofocus

reactjs

redux-form