如何将自动对焦添加到多输入字段

Question

我正在对左滑动过渡动画中的每个第一个输入字段进行自动聚焦，自动聚焦适用于过渡动画中的第一个幻灯片，但不适用于下一个幻灯片，我如何处理动画中的下一个幻灯片。 下面是显示滑动动画的示例代码，当用户添加他们的姓名时，他们将移动或滑到生日幻灯片，并且过渡继续进行，当包含用户名的第一张幻灯片首先显示但会显示时，自动对焦将显示当用户移至另一个屏幕时停止显示。

import React, { Component, Fragment } from 'react';
import { computed, observable } from 'mobx';
import { observer, Provider, inject } from 'mobx-react';
import { object, string } from 'prop-types';
import { Transition } from 'react-transition-group';

@observer
class ClientName extends Component {
@observable firstName = ''
  handleNextStep = (evt) => {
    evt.preventDefault();
    // code to move to birthdate slide
  }
  render() {
    return (
        <form onSubmit={ this.handleNextStep } >
            <input
             value={ this.firstName } autoFocus
            />
            <button
              buttonName="Continue" onClick={ this.handleNextStep }
            />
        </form>
    );
  }
}

@observer
class ClientBirthdate extends Component {
@observable Birthdate = ''

  handleNextStep = (evt) => {
    evt.preventDefault();
    // code to move to birthdate slide
  }
  render() {
    return (
        <form onSubmit={ this.handleNextStep } >
            <input
            value={this.Birthdate} autoFocus
            />
            <button name="Continue" onClick={this.handleNextStep}/>
        </form>
    );
  }
}

class SlidesTransition extends Component {

  render() {
    const { children } = this.props;
    return (
      <Transition
        timeout={ { enter: 1700, exit: 700 } } mountOnEnter unmountOnExit onEnter={ (node, appears ) => (node, appears) onExit={ (node) => (node) }>
        {() => (
          <div >
            {children}
          </div>
        )}
      </Transition>
    );
  }
}

@observer
class ParentSlide extends Component {
  renderSlides(index, component) {
    return (
      <SlidesTransition>
        {component}
      </SlidesTransition>
    );
  }
  render() {
    return (
      <Fragment>
            {this.renderSlides(0, <ClientName />)}
            {this.renderSlides(1, <ClientBirthDate />)}
      </Fragment>
    );
  }
}

export default ClientInfoSlides;
};