时间戳

首页 > 解决方案 > redux-form 字段的有序列表

redux-form - redux-form 字段的有序列表

问题描述

您知道如何从给定的表单中获取字段名称的有序列表吗？实例 API有一个名为“fieldList”的属性，它是一个数组，但顺序不正确。（ordered list = [firstFieldName, secondFieldName, ...]所以我需要一个字段名称列表，以便它们出现在我的表单中 - 从上到下）

此外，redux-form 的操作'@@redux-form/REGISTER_FIELD'是按照正确的表单顺序发送的，所以我想这不是我需要的......

（我的 redux-form 版本：7.3.0）

标签： redux-form

解决方案

我能够从给定表单中检索表单字段名称的有序列表的一种方法是使用“react-redux”中的连接 HOC（高阶组件）通过存储在 redux 表单状态中的注册字段：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import _ from 'lodash';

class Foo extends Component {

  render() {

    const {
      registeredFields,
    } = this.props;

    ...
    ...
    ...

  }

}

const mapStateToProps = (state, props) => {

  // retrieve the registered fields from the form that is stored in redux state; using lodash 'get' function
  const registeredFields = _.get(state, 'form.nameOfYourForm.registeredFields');

  // creating an object with the field name as the key and the position as the value
  const registeredFieldPositions = _.chain(registeredFields).keys().reduce((registeredFieldPositions, key, index) => {
    registeredFieldPositions[key] = index;
    return registeredFieldPositions;
  }, {}).value();

  return({
    registeredFieldPositions,
  });

};

// registeredFieldPositions will now be passed as a prop to Foo
export default connect(mapStateToProps)(Foo);

推荐阅读