Reduxのフォーム - のonChange

Question

をシーンを使用して他の2つのフィールドの値を使用してフィールド値を計算する：quantity、singlePrice、totalPrice：

は約3フィールドを考えます。 私はそれらすべてが私のフォーム内のフィールドである必要はなく、totalPriceは、私がやったこと

...再計算されるように、私はあなたが想像することができ、簡単な操作で数量やsinglePriceを変更するたびにあります

• は、quantityフィールドのonChangeイベントとsinglePriceフィールドの別のイベントによってトリガされる関数を作成しました。アクションは、計算を行い、更新された値オブジェクトを返すformReducer pluginによってピックアップされ

  { name: name_of_the_updated_field, value: new_field_value }

• ：

• 上記の機能は、このようなペイロードを持つReduxのアクションを呼び出します。

問題： マイ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

あなたは、現在の入力値を取得し、like-

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;