2

我正在 Flex 的 CRM 窗格中构建一个 React 表单，POST当代理填写表单并点击提交按钮时，它将向外部服务提供数据。使用create-flex-pluginPlugin Builder v3 中的示例代码，我已经成功地将数据从 redux 的表单字段中保存下来。但是，作为 Flex 中的代理，如果我打开了多个预订，当我在它们之间切换时，它们使用相同的数据。如何设计我的表格，以便代理可以在表格中输入不同预订的数据并将它们分开保存？

我对 Flex、React 和 Redux 比较陌生，不确定是否有任何关于我需要做的 Flex 特定的事情，尤其是在处理多个并发预订时。我曾想过在 redux 中保留一个由 reservationId 或 taskId 键入的 Map，但尚不清楚如何将 taskId 传递给 reducer。我也不确定像 redux-form 这样的其他工具是否能很好地配合 Flex 的设计。

指出正确的方向或获取一些示例代码将是一个很大的帮助。

我当前的实现保留了一个名为“子类别”的字段，如下所示：

HrmFormState.js

const UPDATE_FORM = 'UPDATE_FORM';

const initialState = {
  subcategory: 'my category',
};

export class Actions {
  static updateForm = (e) => ({ type: UPDATE_FORM, text: e.target.value });
}

export function reduce(state = initialState, action) {
  switch (action.type) {
    case UPDATE_FORM: {
      return {
        ...state,
        subcategory: action.text,
      };
    }

    default:
      return state;
  }
}

HrmForm.Container.js


import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { Actions } from '../../states/HrmFormState';
import HrmForm from './HrmForm';

const mapStateToProps = (state) => ({
  subcategory: state['hrm-form'].hrmForm.subcategory,
});

const mapDispatchToProps = (dispatch) => ({
  updateForm: bindActionCreators(Actions.updateForm, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(HrmForm);

HrmForm.jsx（片段）

  render() {
    if (!this.props.task) {
      return null;
    }

    return (
      <HrmFormComponentStyles>
        <form onSubmit={this.handleSubmit}>
          <label>
            Subcategory:
            <input type="text" value={this.props.subcategory} 
              onChange={this.props.updateForm} />
          </label>
          <input type="submit" value="Submit" />
        </form>
      </HrmFormComponentStyles>
    );
  }
4

0 回答 0