使用 onChange 使用其他 2 个字段值计算字段值

Question

场景：

考虑 3 个字段：quantity、singlePrice、totalPrice。 我需要它们都是我表单中的字段，但是每次我通过您可以想象的简单操作更改数量或 singlePrice 时都必须重新计算 totalPrice..

我做了什么：

• 创建了一个由数量字段的 onChange 事件触发的函数和另一个用于 singlePrice 字段的函数。

• 上面的函数调用了一个带有如下负载的 redux 操作：

  { name: name_of_the_updated_field, value: new_field_value }

• 该操作由 formReducer plugin 进行计算并返回更新后的值对象。

问题： 我的 redux 商店没有更新，我的表单也没有更新。

我的表单缩减器（我必须更新的属性在另一个属性中）。

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;
    }
  },
});

我错过了什么吗？如何解决这个问题？ 有没有更简单的方法来得到这个结果？

非常感谢任何帮助！

Answer 1

您可能会考虑使用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;