小编Saw*_*ust的帖子

我已经使用 redux-form 创建了一个 React 组件，并且希望在第一个字段上自动聚焦。这些字段是通过循环遍历一个对象并为该对象中的每个项目创建一个字段来创建的。当我在 JSX 中使用 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 …