Вычислите значение поля, используя другие значения 2 полей, используя onChange

Сцена:

Подумайте о трех полях: quantity, singlePrice, totalPrice. Мне нужно, чтобы все они были полями в моей форме, но totalPrice должен пересчитываться каждый раз, когда я изменяю количество или singlePrice с помощью простой операции, которую вы можете себе представить.

Что я сделал:

  • создал функцию, запускаемую событием onChange для поля количества, и еще одну для поля singlePrice.

  • приведенная выше функция вызывает действие redux с такой полезной нагрузкой:

    { name: name_of_the_updated_field, value: new_field_value }

  • это действие подхватывается плагином formReducer, который делает вычисления и вернуть обновленный объект значения.

Проблема: ни мой магазин редуксов, ни моя форма не обновляются.

Мой редуктор формы (свойство, которое мне нужно обновить, находится внутри другого свойства).

import { reducer as formReducer } from 'redux-form';

export default formReducer.plugin({
  formName: (state, action) => {
    switch (action.type) {
      case 'CALC_TOTAL_PRICE':
        return {
          ...state,
          values: {
            ...state.values,
            competences: state.values.competences.map((c, i) => {
              if (i === action.payload.index) {
                const { name, value } = action.payload;
                const next = Object.assign({}, c);
                next[name] = value;
                next.totalPrice = next.quantity * next.singlePrice
                return next;
              }
              return c;
            }),
          },
        };
      default:
        return state;
    }
  },
});

Я что-то упускаю? Как это исправить? Есть ли более простой способ получить этот результат?

Любая помощь очень ценится!


reactjs javascript forms redux-form
person Alessandro Annini    schedule 28.03.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете подумать об использовании formValueSelector, чтобы получить текущее входное значение и рассчитать итог примерно так:

import React, { PropTypes } from 'react';
import { Field, reduxForm, formValueSelector, FieldArray, SubmissionError } from 'redux-form';
import { connect } from 'react-redux';

class NewSaleForm extends React.Component {

   componentWillReceiveProps(nextProps) {
      if (nextProps.items && nextProps.items.length > 0) {
         nextProps.items.forEach((item) => {
            if (item.price && item.unit) {
               if (item.unit_discount) {
                  item.total = (item.price - item.unit_discount) * item.unit;
               } else {
                  item.total = item.price * item.unit;
               }
            } else {
               item.total = '';
            }
         });
      }
   }

render() {
   ......
}


NewSaleForm = reduxForm({ // eslint-disable-line
   form: 'newSaleForm'
})(NewSaleForm);

const selector = formValueSelector('newSaleForm');

NewSaleForm = connect(state => { // eslint-disable-line
   const items = selector(state, 'items');
   return {
      items,
   };
})(NewSaleForm);

export default NewSaleForm;
person Fazal Rasel    schedule 29.03.2017
comment
Фазал Расель, спасибо за ответ! Я понимаю, что вы имеете в виду, но, возможно, я не совсем ясно объяснил: я должен каким-то образом вводить данные в свойство fields объекта FieldArray, потому что у меня уже есть данные для заполнения полей формы после того, как я выбрал объект из выбора. Это «рабочий» пример. Могу я попросить вас предложить мне, как это исправить? webpackbin.com/bins/-Kecgj77Gbxo_4am3WS1 при выборе продукта из списка он должен дать данные в поля очень похожи на пример FIeldsArray - person Alessandro Annini; 30.03.2017