Question

我使用redux-form创建了一个React组件，我希望在第一个字段上使用autoFocus。通过循环对象并为该对象中的每个项创建一个字段来创建字段。当我在JSX中使用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

解决方法是有条件地渲染表单字段。感谢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 2

其中一些要么没有编译，要么有点冗长。这对我有用：

    {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 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(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 5

我遇到一个问题，其中autoFocus不能正确地从Field传递到基础组件。必须在autoFocus道具的Field中明确传递props。

我可以使用循环创建的redux形式自动对焦于第一个字段吗？

5 个答案: