Вопрос:

ReactJS + Redux: Как правильно и правильно поддерживать состояние для формы?

javascript html reactjs redux react-jsx

60 просмотра

2 ответа

1387 Репутация автора

В ReactJS + Redux, используя Material-UI TextField, http://www.material-ui.com/#/components/text-field , у меня в настоящее время есть форма, где пользователь заполняет firstName, lastName, birthMonth, birthDay, birthYear.

У меня есть следующее, и все это работает, но кажется очень излишним, особенно для даты рождения, например, с точки зрения наличия действия для каждого ввода и обновления его также для каждого изменения:

В компоненте InputComponent.js:

  updateFirstName(event) {
    this.props.actions.updateFirstName(event.target.value)
  }

  updateLastName(event) {
    this.props.actions.updateLastName(event.target.value)
  }

  updateBirthMonth(event) {
    this.props.actions.updateBirthMonth(event.target.value)
  }

  updateBirthDay(event) {
    this.props.actions.updateBirthDay(event.target.value)
  }

  updateBirthYear(event) {
    this.props.actions.updateBirthYear(event.target.value)
  }

  <TextField
    hintText="Enter First Name"
    onChange={this.updateFirstName}
    value={this.props.userInfo.firstName}
  />
  <TextField
    hintText="Enter Last Name"
    onChange={this.updateLastName}
    value={this.props.userInfo.lastName}
  />
  <TextField
    hintText="Enter Birth Month"
    onChange={this.updateBirthMonth}
    value={this.props.userInfo.birthMonth}
  />
  <TextField
    hintText="Enter Birth Day"
    onChange={this.updateBirthDay}
    value={this.props.userInfo.birthDay}
  />
  <TextField
    hintText="Enter Birth Year"
    onChange={this.updateBirthYear}
    value={this.props.userInfo.birthYear}
  />

Тогда для моих действий:

  updateFirstName(eventValue) {
    return {
      type: 'UPDATE_FIRST_NAME',
      firstName: eventValue
    }
  },

  updateLastName(eventValue) {
    return {
      type: 'UPDATE_LAST_NAME',
      lastName: eventValue
    }
  },

  updateBirthMonth(eventValue) {
    return {
      type: 'UPDATE_BIRTH_MONTH',
      birthMonth: eventValue
    }
  },

  updateBirthDay(eventValue) {
    return {
      type: 'UPDATE_BIRTH_DAY',
      birthDay: eventValue
    }
  },

  updateBirthYear(eventValue) {
    return {
      type: 'UPDATE_BIRTH_YEAR',
      birthYear: eventValue
    }
  },

тогда в моем редукторе userReducer.js:

const userReducer = function(userInfo = {}, action){
  switch(action.type){
    case 'UPDATE_FIRST_NAME':
      return {
        ...userInfo,
        firstName: action.firstName
      }

    case 'UPDATE_LAST_NAME':
      return {
        ...userInfo,
        lastName: action.lastName
      }

    case 'UPDATE_BIRTH_MONTH':
      return {
        ...userInfo,
        birthMonth: action.birthMonth
      }

    case 'UPDATE_BIRTH_DAY':
      return {
        ...userInfo,
        birthDay: action.birthDay
      }

    case 'UPDATE_BIRTH_YEAR':
      return {
        ...userInfo,
        birthYear: action.birthyear
      }

    default:
      return userInfo
  }
}

export default userReducer

Для ReactJS + Redux есть ли лучшая, более правильная и эффективная практика для обработки входных данных?

Заранее спасибо!

Автор: Jo Ko Источник Размещён: 22.08.2016 08:54

Ответы (2)


0 плюса

12939 Репутация автора

Предупреждение, я очень новичок в React и просто пытаюсь представить ход мыслей, который слишком велик, чтобы добавить его в качестве комментария. Если это сбой, я удалю ответ ...

Можете ли вы объединить все функции обновления в одну updateUserInfo?

// Component
<TextField name="firstName" onChange={this.updateUserInfo} ... />
<TextField name="lastName" onChange={this.updateUserInfo} ... />

updateUserInfo(event) {
  this.props.actions.updateUserInfo(event.target.name, event.target.value);
}

// Action
updateUserInfo(eventProperty, eventValue) {
    return {
      type: 'UPDATE_USER_INFO',
      property: eventProperty,
      value: eventValue
    };
}

// Reducer
const userReducer = function(userInfo = {}, action){
  switch(action.type){
    case 'UPDATE_USER_INFO':
      var returnObj = {
        ...userInfo
      };
      returnObj[action.property] = action.value;
      return returnObj;
  }
}

Альтернативное действие и редуктор:

// Action
updateUserInfo(eventProperty, eventValue) {
    var updatedData = {};
    updatedData[eventProperty] = eventValue;

    return {
      type: 'UPDATE_USER_INFO',
      data: updatedData
    };
}

// Reducer
const userReducer = function(userInfo = {}, action){
  switch(action.type){
    case 'UPDATE_USER_INFO':
      return {
        ...userInfo,
        ...action.data
      };
  }
}
Автор: Quantastical Размещён: 22.08.2016 09:17

0 плюса

2028 Репутация автора

Я настоятельно рекомендую вам взглянуть на избыточную форму .

Ваша форма будет примерно такой ( пример отсюда ):

import React, {Component} from 'react';
import {reduxForm} from 'redux-form';

class ContactForm extends Component {
  render() {
    const {fields: {firstName, lastName, email}, handleSubmit} = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>First Name</label>
          <input type="text" placeholder="First Name" {...firstName}/>
        </div>
        <div>
          <label>Last Name</label>
          <input type="text" placeholder="Last Name" {...lastName}/>
        </div>
        <div>
          <label>Email</label>
          <input type="email" placeholder="Email" {...email}/>
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

ContactForm = reduxForm({ // <----- THIS IS THE IMPORTANT PART!
  form: 'contact',                           // a unique name for this form
  fields: ['firstName', 'lastName', 'email'] // all the fields in your form
})(ContactForm);

export default ContactForm;
Автор: Ali Sepehri.Kh Размещён: 23.08.2016 05:47
Вопросы из категории :
32x32