如何使用redux-form onChange从商店获取更新的值?

时间:2019-10-23 12:59:42

标签: javascript reactjs redux react-redux redux-form

使用Redux格式8.2.2,每当在FieldArray中更新 amount 字段时,我都希望更新 total 字段。 我的className={`${styles.LNLink} ${props.className`} 函数在FieldArray上循环并求和一些值,这些值是我通过updateTotal()或通过getFormValues()获取的。但是在两种情况下,值都包含formValueSelector之前的值,而不是onChange之后的值。 我的FieldArray调用的组件如下所示:

onChange

使用此代码,当forEach到达索引时,它将获取先前的tpp [index] .amount值,而不是更新的值。

暂时,我正在使用以下解决方法:

import React from "react";
import { connect } from "react-redux";
import { Field, getFormValues, change } from "redux-form";

const RenderTPP = props => {
  const { fields, dispatch, values } = props;

  const updateTotal = index => {
    let tppTotal = 0;
    values.tpp.forEach((item, i) => {
      tppTotal += parseFloat(item.amount);
    });
    dispatch(change("myForm", "total", tppTotal));
  };

  return (
    <tr>
      <td>
        {fields.map((tpp, index) => (
          <div key={index}>
            <Field
              name={`tpp[${index}].amount`}
              component="input"
              type="text"
              onChange={() => updateTotal(index)}
            />
          </div>
        ))}
      </td>
      <td>
        <Field name="total" component="input" type="text" />
      </td>
    </tr>
  );
};

export default connect(state => ({
  values: getFormValues("myForm")(state)
}))(RenderTPP);

代替

onChange={(event, newValue) => updateTotal(index, newValue)}

onChange={() => updateTotal(index)}

用于const updateTotal = (index, value) => { let tppTotal = parseFloat(value); values.tpp.forEach((item, i) => { if (i != index) tppTotal += parseFloat(item.amount); }); dispatch(change("caseDataForm", "total", tppTotal)); }; 函数。这个解决方法似乎可以完成工作,但是它不适合我的情况,因为我想从应用程序的其他部分调用updateTotal()。即使这似乎行得通,我还是更愿意在updateTotal()被解雇后直接从商店获取更新的值。

0 个答案:

没有答案