Question

我创建了一个具有两个层次结构的表单。

-rate-card
  -rules-within-a-rate-card

用户最多可以创建10个规则，每个rate-cards。

我用redux-form创建了一种表格，该表格可以动态生成卡，并且存储的值采用以下形式：

form: {
rateCardForm: {
  syncErrors: {
    mode: 'Required',
    networkBank: 'Required',
    paymentGateway: 'Required',
    onus: 'Required',
    lowerLimit: 'Required',
    upperLimit: 'Required',
    creditCycle: 'Required',
    percent: 'Required',
    flatFee: 'Required',
    tax: 'Required'
  },
  values: {
    'rate-card-0': {
      'rule-0': {
        mode: 'WALLET',
        networkBank: 'JCB',
        paymentGateway: 'All/Remaining',
        onus: true,
        lowerOperator: '>',
        lowerLimit: '123',
        upperOperator: '<=',
        upperLimit: '123',
        creditCycle: '12311',
        percent: '231',
        flatFee: '231',
        tax: '2311'
      },
      'rule-1': {
        mode: 'Cash',
        networkBank: 'JCB',
        paymentGateway: 'ICICI',
        onus: true,
        lowerOperator: '>',
        lowerLimit: '123',
        upperOperator: '<',
        upperLimit: '44554',
        creditCycle: '43',
        percent: '23',
        flatFee: '23',
        tax: '12'
      },
      dateRange: {
        startDate: '2019-03-14T06:30:00.000Z',
        endDate: '2019-04-15T06:30:00.000Z'
      }
    },
    'rate-card-1': {
      dateRange: {
        startDate: '2019-03-10T06:30:00.000Z',
        endDate: '2019-03-22T06:30:00.000Z'
      },
      'rule-0': {
        mode: 'UPI',
        networkBank: 'MASTERCARD',
        paymentGateway: 'HDFC',
        onus: true,
        lowerOperator: '>=',
        lowerLimit: '2323',
        upperOperator: '<',
        upperLimit: '123',
        creditCycle: '123',
        percent: '123',
        flatFee: '23',
        tax: '123'
      }
    }
  },
  anyTouched: true,
  submitSucceeded: true
}

我正在为每个价目表和每个规则（在价目表中生成）动态生成名称。

我希望访问组件本身中这些字段的名称，以便根据某些字段选择有条件地呈现某些字段。

我现在正在尝试的内容：

使用formValueSelector装饰器
将整个values密钥放入组件中

如何仅获得一张价目表和一项规则的价值？

Answer 1

您可以编写自己的选择器来获取所需的数据（选择器不过是具有Redux状态并返回派生值的函数）。例如，要获取所有价目表的ID：

function getRateCardNames(state) {
  return Object.keys(state.form.rateCardForm.values)
}

要获取价目表的规则名称，请执行以下操作：

function getRuleNames(state, { rateCardName }) {
  return Object.keys(state.form.rateCardForm.values[rateCardName])
}

要获取特定规则的所有字段：

function getRuleValues(state, { rateCardName, ruleName }) {
  const rateCardValues = state.form.rateCardForm.values[rateCardName]
  return rateCardValues && rateCardValues[ruleName]
}

然后您可以从表单组件的mapStateToProps调用这些选择器。

从redux-form状态获取动态生成的值

1 个答案: