Как получить значение из Поля в избыточной форме? - PullRequest
Новая
       6

Как получить значение из Поля в избыточной форме?

0 голосов
/ 11 апреля 2019

У меня есть два поля в моем компоненте: $ {Adjust} .lastYear и $ {Adjust} .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;

Если в этих 2 полях нет значения, поле ValueComments должно быть невидимым.Как мне это сделать?

1 Ответ

0 голосов
/ 11 апреля 2019

Вы можете получить значения формы с помощью метода getFormValues.Его использование будет примерно таким: getFormValues('myForm')(state).

Вот шаги, которые вам нужно сделать.

  1. подключиться к редуксу с помощью connect HOC.
  2. В mapStateToProps вызовите getFormValues.

Таким образом, ваш компонент экспорта будет выглядеть следующим образом.

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

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

Тогда в вашем компоненте вы должны проверить props.formValues Существуют и props.formValues[${adjustment}.currentYear] и props.formValues[${adjustment}.lastYear]

, поэтому условие будет 

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