Question

我在组件中有两个字段：$ {adjustment} .lastYear和$ {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;

如果这两个字段中没有值，则ValueComments字段应该不可见。我该怎么做？

Answer 1

您可以使用称为Optional的方法来获取表单值。它的用法类似于getFormValues。

这些是您需要执行的步骤。

通过getFormValues('myForm')(state) HOC连接到redux。
在mapStateToProps中，调用connect。

因此您的导出组件将是这样。

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]

如何从Redux形式的字段中获取价值？

1 个答案: