Как добавить автофокус в поле мульти ввода - PullRequest
Новая
       30

Как добавить автофокус в поле мульти ввода

0 голосов
/ 25 июня 2019

Я работаю над автофокусировкой каждого первого поля ввода в анимации перехода с левым скольжением, автофокусировка работает для первого слайда в анимации перехода, но не для следующего слайда, как мне обработать последующий слайд в анимации. Ниже приведен пример кода для отображения скользящей анимации, когда пользователь добавляет свое имя, которое он будет перемещать или перемещать на слайд с датой рождения, и переход продолжается, автофокус будет отображаться, когда первый слайд, содержащий имя пользователя, отображается первым, но будет перестать отображаться, когда пользователь переходит на другой экран. 

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;
};
...