Javascript 使用onChange使用其他两个字段值计算字段值

场景：

考虑三个字段：

数量

，

单一价格

，

总价

。 我需要它们都是我表单中的字段，但每次我用一个你们可以想象的简单操作更改数量或单个价格时，都必须重新计算totalPrice

我所做的：

• 创建了一个由quantity字段的onChange事件触发的函数，并为singlePrice字段创建了另一个函数

• 上述函数使用如下负载调用redux操作：

  {name:name\u\u\u更新的\u字段，value:new\u字段\u value}

• 该操作由进行计算并返回更新值对象的对象拾取

问题： 我的redux商店未更新，我的表单也未更新

My form reducer（我必须更新的属性位于另一个属性中）

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

---

非常感谢您的帮助

您可能会考虑使用

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;

---

法扎尔·拉塞尔，谢谢你的回复！我理解你的意思，但可能我的解释不清楚：我应该以某种方式将数据注入

FieldArray

的

fields

属性，因为在我从select中选择了一个对象之后，我已经有数据可以放入表单字段。这是一个“工作”示例。。我可以请你建议我如何修理它吗？当您从select中选择产品时，它应该将数据提供给字段，非常类似FIeldsArray示例

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;