结合 React 最终形式数组和最终形式计算

Question

我很难访问字段数组中的对象以计算字段 price * quantity = total 。已经为装饰字段尝试了一堆正则表达式，包括 field: /invoiceItems\[\d+\]/ , 来访问和来自这个 PR (https://github.com/final-form/final-form-calculate/pull/21/commits/dab00f8125079fed402712a4b0ed71663be0ba14) 的解决方案

在 PR 我无法访问索引。使用最终形式计算和数组进行计算的最佳方法是什么？我也在 Formik 中尝试过，但遇到了同样的问题。

代码

表格：

          onSubmit={onSubmit}
          decorators={[calculator]}
          mutators={{
            ...arrayMutators,
          }}
          initialValues={{
            companyName: "",
            companyAddress: "",
            companyCity: "",
            companyState: "",
            companyZip: "",
            invoiceNumber: shortid.generate(),
            invoicePaymentStatus: "",
            invoiceStatus: "",
            invoiceItems: [

            ],
            invoiceDate: new Date(),
            invoiceDueDate: new Date(
              new Date().getTime() + 7 * 24 * 60 * 60 * 1000
            ),
            clientFname: "",
            clientLname: "",
            billingAddress: "",
            billingCity: "",
            billingState: "",
            billingZip: "",
            propertyAddress: "",
            propertyCity: "",
            propertyState: "",
            propertyZip: "",
            invoiceTotal: "",
            tax: "",
          }}
          render={({
            handleSubmit,
            reset,
            submitting,
            pristine,
            values,
            form: {
              mutators: { push, pop },
            },
          }) => (
            <form onSubmit={handleSubmit} noValidate>

字段数组：

                            type="button"
                            onClick={() => push("invoiceItems", undefined)}
                          >
                            Add Line Item
                          </button>
                          <FieldArray name="invoiceItems">
                            {({ fields }) =>
                              fields.map((item, index) => (
                                <div key={item}>
                                  <Field
                                    name={`${item}.description`}
                                    component={TextField}
                                    placeholder="Description"
                                  />
                                  <Field
                                    name={`${item}.price`}
                                    component={TextField}
                                    placeholder="Price"
                                  />
                                  <Field
                                    name={`${item}.quantity`}
                                    component={TextField}
                                    placeholder="Quantity"
                                  />
                                  <Field
                                    name={`${item}.total`}
                                    component={TextField}
                                    placeholder="Total"
                                  />
                                  <span
                                    onClick={() => fields.remove(index)}
                                    style={{ cursor: "pointer" }}
                                  >
                                    ❌
                                  </span>
                                </div>
                              ))
                            }
                          </FieldArray> 

这是我尝试过的一些装饰器。 （这是一场灾难，有这么多不同的尝试，忽略了数学，因为我们只是想让它工作）

    { 
      field: /invoiceItems\[\d+\]/ ,
      updates: {(name, index, value) => {
        [`invoiceItems[${index}].total`]: (_ignored, values) =>  2 
        //invoiceItems.total: (price, allValues) => price * 2
      }
    }
  )

Answer 1

最终基于此修复它：How do I combine `final-form-calculate` with `final-form-array`

这是完成的代码：

const calculator = createDecorator(
  {
    field: /invoiceItems\[\d+\]\.price/,
    updates: (value, name, allValues) => {
      const totalField = name.replace(".price", ".total");
      const quantityField = name.replace(".price", ".quantity");
      return {
        [totalField]: parseInt(value) * parseInt(getIn(allValues, quantityField)),
      };
    },
  },
  {
    field: /invoiceItems\[\d+\]\.quantity/,
    updates: (value, name, allValues) => {
      const totalField = name.replace(".quantity", ".total");
      const priceField = name.replace(".quantity", ".price");
      return {
        [totalField]: parseInt(value) * parseInt(getIn(allValues, priceField)),
      };
    },
  }
);