Создание пошаговой формы регистрации на React

Хорошей особенностью React является как этот фреймворк обрабатывает состояние нашего приложения. Каждый раз, когда у  React  обновляются компоненты, React будет рендерить обновленный вид. Иначе: React отлично показывает пользователям то что происходит на странице — если это необходимо.

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

Демо

Исоходники на github

Начинаем работу

У нас будет процедура регистрации состоять из 4-х шагов. Пользователь будет:

  1. Вводить основную информацию об учетной записи
  2. Заполнит основную информацию о себе
  3. Подтвердит что информация верна
  4. Увидит сообщение об успешной регистрации

Самый простой способ, чтобы показать только необходимые поля для данного шага, это хранить контент организованный в дискретных компонентах. Затем, когда пользователь переходит к следующему шагу в процессе заполнения, мы увеличим шаг на 1. React увидит изменения и автоматически рендерит компонент, чтобы показать то, что мы хотим, показать пользователю. Вот основной код:

// file: Registration.jsx
var React         = require('react')
var AccountFields = require('./AccountFields')
var SurveyFields  = require('./SurveyFields')
var Confirmation  = require('./Confirmation')
var Success       = require('./Success')
var Registration = React.createClass({
  getInitialState: function() {
    return {
      step : 1
    }
  },
  render: function() {
    switch(this.state.step) {
      case 1:
        return <AccountFields />
      case 2:
        return <SurveyFields />
      case 3:
        return <Confirmation />
      case 4:
        return <Success />
    }
  }
}
module.exports = Registration

Когда пользователь находится на первом шаге (когда наш первый компонент загружается) мы покажем поля данных, на втором мы покажем вопросы анкеты, на третьем подтверждение пользователя, на четвертом сообщение об успешной регистрации. Мы будем подключать эти компоненты используя CommonJS паттерн; каждый из них будет React компонентом.

Далее, мы создадим объект, для хранения данных которые вводит пользователь. У нас будет поля имя, email, пароль, возраст, и любимый цвет. Давайте сохраним эту информацию в качестве FieldValues в верхней части нашего родительского компонента (Register.jsx).

// file: Registration.jsx
var fieldValues = {
  name     : null,
  email    : null,
  password : null,
  age      : null,
  colors   : []
}
// The rest of our file
...

Наш первый компонент, , содержит поля, используемые для создания новой учетной записи: имя пользователя, пароль и электронную почту. Когда пользователь нажимает «Сохранить и продолжить» Мы сохраним данные и перейдем к шагу 2.

// file: AccountFields.jsx
var React = require('react')
var AccountFields = React.createClass({
  render: function() {
    return (
      <div>
        <label>Name</label>
        <input type="text" ref="name" defaultValue={this.props.fieldValues.name} />
        <label>Password</label>
        <input type="password" ref="password" defaultValue={this.props.fieldValues.password} />
        <label>Email</label>
        <input type="email" ref="email" defaultValue={this.props.fieldValues.email} />
        <button onClick={this.saveAndContinue}>Save and Continue</button>
      </div>
    )
  },
  saveAndContinue: function(e) {
    e.preventDefault()
    // Get values via this.refs
    var data = {
      name     : this.refs.name.getDOMNode().value,
      password : this.refs.password.getDOMNode().value,
      email    : this.refs.email.getDOMNode().value,
    }
    this.props.saveValues(data)
    this.props.nextStep()
  }
})
module.exports = AccountFields

Основные моменты в этом компоненте :

  1. defaultValue будут установлены начальные значения при входе. Это необходимо React. Нажмите здесь, чтобы прочитать больше на эту тему.
  2. Мы устанавливаем defaultValue к ключу, связанному this.props.fieldValues, который передается в качестве свойств от родительского компонента (Registration.jsx). Это так, когда пользователь сохраняет и продолжает к следующему шагу, но затем возвращается к предыдущему шагу, и данные которые он ввел будут уже отображаться в полях.
  3. Мы получаем значение этих полей, ссылаясь на DOM узлов с использованием ссылок.
  4. saveValues метод для nextStep передает в качестве свойства параметры. Так как на этапе 2, мы можем вернуться к предыдущему шагу, мы должны создать previousStep.

// file: Registration.jsx

saveValues: function(fields) {
return function() {
// Remember, `fieldValues` is set at the top of this file, we are simply appending
// to and overriding keys in `fieldValues` with the `fields` with Object.assign
// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
fieldValues = Object.assign({}, fieldValues, fields)
}()
},

nextStep: function() {
  this.setState({
    step : this.state.step + 1
  })
},
// Same as nextStep, but decrementing
previousStep: function() {
  this.setState({
    step : this.state.step - 1
  })
},
...

Затем мы передадим эти данные вновь, как свойства каждому из наших следующих компонентов.

// file: Registration.jsx
...
render: function() {
  switch (this.state.step) {
    case 1:
      return <AccountFields fieldValues={fieldValues}
                            nextStep={this.nextStep}
                            saveValues={this.saveValues} />
    case 2:
      return <SurveyFields fieldValues={fieldValues}
                           nextStep={this.nextStep}
                           previousStep={this.previousStep}
                           saveValues={this.saveValues} />
    case 3:
      return <Confirmation fieldValues={fieldValues}
                           previousStep={this.previousStep}
                           submitRegistration={this.submitRegistration} />
    case 4:
      return <Success fieldValues={fieldValues} />
  }
}

В нет previousStep, так как это наш первый шаг, и вы не можете вернуться назад. Кроме того, вместо передачи saveValues или с nextStep для мы передаем только что созданный метод submitRegistration, который будет обрабатывать представления для входа пользователей (FieldValues) и изменит шаг нашего процесса регистрации на 4, тем самым показывая .

Компоненты , и вы можете посмотреть на Github здесь, здесь, и здесь.

Вывод

React является хорошим выбором для обработки и вывода пользователю данных и форм. В нашем примере, мы показываем поля ввода, и когда эти поля показаны определяется текущей стадии (шаг нашего компонента регистрации). В зависимости от состояния нашего приложения, мы можем просто и предсказуемо сделать что-то другое, будь то, как маленький одно изменение характера или показывая совершенно иной компонент в целом.

  • Buscando92

    Спасибо, ребят!