How to get value from Fields in redux-form?

问题

I have two fields on my component: ${adjustment}.lastYear and ${adjustment}.currentYear

import React from 'react';
import { Field } from 'redux-form';
import { IconDelete, Select } from 'user-comps';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import CommentsAdjustments from './CommentsAdjustments';
import { normalizeCurrencyField, getCurrencyFomattedFloat } from '../../helpers';
import InputGroup from '../InputGroup';
import { Wrapper, Value, ValueComments, ValueHeading } from './AdjustmentStyled/Styles';

// eslint-disable-next-line react/prop-types
const StyledSelect = ({ input }) => (
  <SelectWrapper>
    <Select {...input}>
      <option>Adjustment Type</option>
      <option value="-">Non-recurring income </option>
      <option value="+">Non-recurring expense</option>
      <option value="-">Rental Income (new purchase)</option>
      <option value="+">Rental Expense (new purchase)</option>
      <option value="+">Discretionary Super</option>
      <option value="-">Capex</option>
      <option value="-">Working Capital Adjustments </option>
    </Select>
  </SelectWrapper>
);
const SelectWrapper = styled.div`
  grid-column: 1 / span 2;
`;

const IconWrapper = styled.div`
  margin-bottom: 10px;
`;

const AdjustmentRow = ({ adjustment, fields, index }) => {
  const removeAdjustment = () => {
    fields.remove(index);
  };

  // eslint-disable-next-line no-debugger
  debugger;

  // todo refactor list items:
  return (
    <Wrapper>
      <ValueHeading textAlign="right" gridRow={2}>
        <Field name={`${adjustment}.type`} component={StyledSelect} />
      </ValueHeading>
      <Value textAlign="right" gridCol={2} gridRow={2}>
        <Field
          name={`${adjustment}.lastYear`}
          component={InputGroup}
          prefix="$"
          type="text"
          format={getCurrencyFomattedFloat}
          normalize={normalizeCurrencyField(9)}
          weight="bold"
        />
      </Value>
      <Value textAlign="right" gridCol={3} gridRow={2}>
        <Field
          name={`${adjustment}.currentYear`}
          component={InputGroup}
          prefix="$"
          type="text"
          format={getCurrencyFomattedFloat}
          normalize={normalizeCurrencyField(9)}
          weight="bold"
        />
      </Value>
      <Value textAlign="right" gridCol={4} gridRow={2}>
        <IconWrapper>
          <IconDelete marginBottom="4px" onClick={() => removeAdjustment(index)} />
        </IconWrapper>
      </Value>
      testing {adjustment.lastYear}
      {adjustment.lastYear !== '' && adjustment.currentYear !== '' && (
        <ValueComments textAlign="right" gridCol={3} gridRow={3}>
          <Field name={`${adjustment}.comments`} type="text" component={CommentsAdjustments} />
        </ValueComments>
      )}
    </Wrapper>
  );
};

AdjustmentRow.propTypes = {
  adjustment: PropTypes.shape({
    type: PropTypes.string,
    lastYear: PropTypes.string,
    currentYear: PropTypes.string,
  }).isRequired,
  fields: PropTypes.arrayOf(String).isRequired,
  index: PropTypes.string.isRequired,
  // eslint-disable-next-line react/no-unused-prop-types
  input: PropTypes.arrayOf(String).isRequired,
};

export default AdjustmentRow;

If there is no value in these 2 fields the ValueComments field should be not visible. How can I accomplish this?

回答1:

You can get the form values with the method called getFormValues. Its usage would be like this getFormValues('myForm')(state).

These are the steps you need to do.

connect to the redux with connect HOC.
In mapStateToProps, invoke the getFormValues.

So your export component would be like this.

const mapStateToProps = (state) => ({
         formValues: getFormValues('myForm')(state)
    });

export default connect(mapStateToProps)(
  reduxForm({
    // config goes here
  })(MyForm)
);

Then in your component, you have to check props.formValues exist and props.formValues[${adjustment}.currentYear] and props.formValues[${adjustment}.lastYear]

so condition would be

(!!props.formValues && 
!!props.formValues[lastYearKey] && 
!!props.formValues[currentYearKey] && (
<ValuesComment />

来源：https://stackoverflow.com/questions/55623423/how-to-get-value-from-fields-in-redux-form

标签

reactjs

redux-form