0

我有一个呈现 MonthView 组件的 MonthContainer 组件。容器将数据传递给视图，视图进行格式化并显示一个带有对应于月份和类别的链接按钮的表格。

我想要做的是，当在 MonthView 中单击链接时，页面上会显示一个弹出窗口，其中包含另一组数据，该数据基于所单击链接的年份、类别和月份。我正在使用 react-modal 来实现这一点。

在我的初始设置中，MonthViewContainer 正在渲染 MonthView 和 PopupContainer，而后者又渲染了 PopupView。向 PopupContainer 传递了一个完整的交易数据列表（未过滤），然后将其传递给 PopupView。当我单击 MonthView 中的链接时，它会将 displayModal 标志设置为 true，并且包装在 react-modal 中的 PopupView 组件将显示基于年、月、类别过滤的事务。这工作得很好，除了我在保存和关闭模式后更新父组件的挑战。但是，我不喜欢将所有状态加载到 PopupView 中然后进行过滤的想法。理想情况下，我想在 PopView 加载时获取数据。我很难做到这一点。

我的设置有几个问题。下面是我遇到问题的每个部分的注释代码。

MonthViewContainer

import React from 'react';
import MonthView from './MonthView.js';
import { connect } from 'react-redux';
import { getTransactions } from '../actions/actions.js';
import TransactionsPopupContainer from './TransactionsPopupContainer.js';

MonthViewContainer Component

    class MonthViewContainer extends React.Component {
      constructor() {
        super();

        this.popupCategory;
        this.popupMonth;

        this.state = {
          detailPopup : false
        }

        this.handleGetDetail = this.handleGetDetail.bind(this);
        this.handleRefresh = this.handleRefresh.bind(this);
      }

      componentDidMount() {

        this.props.getTransactions(2016);
        // this.props.getTransactionsAll(2016);

      }

      render() {
        return (
          <div className="row">
            <div className="col-md-12">
                <MonthView 
                  transactions={this.props.storeTransactions.transactions} 
                  selectedYear={this.props.storeTransactions.selectedYear} 
                  onHandleGetDetail={this.handleGetDetail} 
                />
            </div>
            <div>
                <PopupContainer 
                    modalActive={this.state.detailPopup} 
                    selectedYear={this.props.storeTransactions.selectedYear} 
                    category={this.popupCategory} 
                    month={this.popupMonth}
                    onRefresh={this.handleRefresh}
                />
            </div>
          </div>
        ) 
      }

      handleRefresh() {
        console.log("handle refresh entered")
        this.props.getTransactions(this.props.storeTransactions.selectedYear);
      }

      handleGetDetail(year,category,month) {

        this.popupCategory = category;
        this.popupMonth = month;

        this.setState({ detailPopup: true}, function () {});
      }

    }


    const mapStateToProps = (state) => ({
      storeTransactions: state.storeTransactions
    });


    export default connect(mapStateToProps, {getTransactions})(MonthViewContainer);

弹出容器

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

import PopupView from './PopupView.js';
import { getPopupTransactions } from '../actions/actions.js';
import { saveTransactions } from '../actions/actions.js';


class PopupContainer extends React.Component {

    constructor() {
        super();


        this.editedTrans = undefined;
        this.handleSave = this.handleSave.bind(this);

    }


    componentWillUnmount(){
        //when modalActive is true, I would like to get the popup data with params coming from props
            //doing something like getPopupTransactions
        //the problem is I can't do it here because the component is mounted when parent loads and
            //is set to active/visible when a button is clicked on the parent
    }





 handleSave(transToSave) {

    this.props.saveTransactions(transToSave);//use the action in redux store to save these transactions

    //refresh the parent (MonthViewContainer/MonthView) after saving //not sure how to do this after closing the modal
        //I would like the transactions that are saved after closing the modal to be reflected in the parent component
        //what I attempted is to pass in a handler what will trigger set state and case the MonthViewContainer to rerender
    this.props.handleRefresh();

  }

    render() {

        return (
            <PopupView 
                modalActive={this.props.modalActive} 
                transactions={this.props.storePopupTransactions.popuptransactions}
                savePopupView={this.handleSave}
            />
        );
    }

}


const mapStateToProps = (state) => {
    return {storePopupTransactions: state.storePopupTransactions//,
    }
};


export default connect(mapStateToProps, {getPopupTransactions,saveTransactions})(PopupContainer);
4

1 回答 1

0

一直在研究它，事实证明我确实能够在调用 closeModal 之后和将 react-modal 组件的 modalIsOpen 设置为 false 之前调用我的父组件（MonthViewContainer）（在我的例子中是 PopupView）。因此，我能够从 PopupView 中保存数据，然后在 MonthViewContainer 中刷新我的状态。

于 2018-02-08T20:36:30.373 回答