获取FieldArrays字段值以计算结果v.6

Question

const renderLists = ({fields}) => {
   return <tbody>
   {fields.map((member, index) =>
       <tr key={index}>
          <td>
             <Field
                 name={`${member}.item`}
                 type="text"
                 component={renderItems}
                 label="Item"/>
          </td>
          <td>
             <Field
                 name={`${member}.unit`}
                 type="number"
                 component={renderField}
                 label="unit"/>
          </td>
          <td>
             <Field
                 name={`${member}.price`}
                 type="number"
                 component="input"
                 label="quantity"/>
          </td>
          <td>
               // Display Unit*Price
          </td>
          <td>
             <button onClick={() => fields.remove(index)}>remove</button>
          </td>
       </tr>
   )}
   <button type="button" onClick={() => fields.push({})}>Add Item</button>
   </tbody>
};

如何获取每行的单位和价格的值，并在相应的行上显示计算结果。

Answer 1

使用formValueSelector：

import { connect } from "react-redux";
import { formValueSelector } from "redux-form";

const renderList = ({ fields, fieldValues }) => (
  <tbody>
    { fields.map( ( field, index ) => {
      <tr><td>{ fieldValues[ index ] }</td></tr>
    })}
  </tbody>
);

export default connect(state => {
  fieldValues: formValueSelector("formName")(state, "fieldName")
})( renderList );

Documentation available here