如何以 redux 形式从字段中获取价值?

问题描述

我的组件上有两个字段:${adjustment}.lastYear 和 ${adjustment}.currentYear

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;

如果这 2 个字段中没有值，则 ValueComments 字段应该不可见.我怎样才能做到这一点?

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

推荐答案

您可以使用名为 getFormValues 的方法获取表单值.它的用法就像这样 getFormValues('myForm')(state).

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.

1. 使用 connect HOC 连接到 redux.
2. 在 mapStateToProps 中，调用 getFormValues.

1. connect to the redux with connect HOC.
2. 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)
);

然后在您的组件中，您必须检查 props.formValues 是否存在和 props.formValues[${adjustment}.currentYear] 和 props.formValues[${adjustment}.lastYear]

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

所以条件是

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

这篇关于如何以 redux 形式从字段中获取价值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！