Question

我正在使用React Bootstrap Dialog（https://github.com/akiroom/react-bootstrap-dialog），它打开了Modal的用法。我在对话框的主体中使用了另一个React组件。用户单击“确定”后，如何引用该组件及其状态？

  let distributionListTable = <DistributionList name="distributionList" />;
        debugger;
        this.dialog.show({
            title: 'Select Users',
            body: distributionListTable,
            bsSize: 'large',
            actions: [
                Dialog.Action(
                    'Ok',
                    () => {
                        debugger;
                        //How to refer distribution list component and its state?
                    },
                'btn-fis'),
                Dialog.Action(
                    'Cancel',
                    (dialog) => {
                        dialog.hide();
                    },
                    'btn-fis-secondary'
                )
            ]
        });

Answer 1

在这种情况下，您需要将表格数据上一级上移到主要组件中。

在传入的主要组件中使用 handler 来更新状态。

现在，您已经可以访问状态，因为它已被移到一个共同点。

通常在这种情况下，升级是正确的解决方案。

此 REDUX 还有另一种解决方案，但是在如此小的情况下使用REDUX可能会显得过大。

  Constructor(){
     super();
     this.state = {
        // TabularCheckBoxData
     }   
  }


  checkboxCheckHandler = (event,index) =>{
     // This code is to handle the checkbox click, use the index to update
  }

  let distributionListTable = <DistributionList name="distributionList" handler={this.checkboxCheckHandler}/>;
        debugger;
        this.dialog.show({
            title: 'Select Users',
            body: distributionListTable,
            bsSize: 'large',
            actions: [
                Dialog.Action(
                    'Ok',
                    () => {
                        debugger;
                        this.state; // Now access using this.state
                    },
                'btn-fis'),
                Dialog.Action(
                    'Cancel',
                    (dialog) => {
                        dialog.hide();
                    },
                    'btn-fis-secondary'
                )
            ]
        });

Answer 2

尝试创建distributionListTable的实例并访问状态对象。像这样的东西。

  let distributionListTable = <DistributionList name="distributionList" />;
  let distTable = new distributionListTable();

    debugger;
    this.dialog.show({
        title: 'Select Users',
        body:distributionListTable ,
        bsSize: 'large',
        actions: [
            Dialog.Action(
                'Ok',
                () => {
                    debugger;
                    function(){

            return distTable.state





          }
                },
            'btn-fis'),
            Dialog.Action(
                'Cancel',
                (dialog) => {
                    dialog.hide();
                },
                'btn-fis-secondary'
            )
        ]
    });

`

在React Bootstrap对话框中，如果对话框的主体内部有一个Component，如何引用组件及其状态？

2 个答案: