Question

当我在打开时尝试访问模态引用时遇到问题。

以下是我的包装类。

ModalWrapper

import * as React from 'react';
import MyModal from './MyModal'
import * as ReactDOM from "react-dom";

export interface IModalWrapperProps {
}

export class ModalWrapper extends React.PureComponent<IModalWrapperProps, {}> {
    constructor() {
        super();
    }

    /**
     * EDITED HERE 
    */

    handlePrint = (refObj) => {
        //Getting the ref of the MyMoal component but when I trying to log the data key it is undefined
        console.log(refObj); //successfully logs the ref object of MyModal component.
        const refVal = refObj.data;
        const node = ReactDOM.findDOMNode(refVal);
        console.log(node) // logging null still
    }

    renderDivTag = () => {
        return (
            <div>
                <h1>Hello Modal</h1>
            </div>
        )
    }

    render() {
        return (
            <MyModal id="test-modal" onPrint={this.handlePrint} showComponent={this.renderDivTag()} />
            <button onClick={() => showHelloModal('test-modal')} />
            )
    }
}

MyModal组件

import * as React from 'react';
import { Modal } from 'react-bootstrap';
import { connect } from 'react-redux';

export interface IMyModalProps {
    modalID: string;
    id: string;
    showComponent: React.ComponentClass;
    onPrint: (ref) => void;
}

export class MyModalImpl extends React.PureComponent<IMyModalProps, {}> {

    constructor() {
        super();
    }
    /**
    * EDITED HERE 
    */

    refValue;

    handlePrint = () => { 
        return this.props.onPrint(this.refValue);
     }

    render() {
        if (this.props.modalID !== this.props.id) {
            return <div></div>;
        }
        return (
            <Modal className="print-preview-outer" show={true} >
                <Modal.Header closeButton>
                    <Modal.Title>Print Preview</Modal.Title>
                </Modal.Header>
                <Modal.Body className="print-preview">
                    <div 
                            /**
                            * EDITED HERE   
                            */

                        ref=((value) => this.refValue = value)
                        style={{ width: '597px', background: 'white', margin: 'auto' }}
                        id="print-preview"
                    >
                        {this.props.showComponent}
                    </div>
                </Modal.Body>
                <button onClick={this.handlePrint}>Print</button>
            </Modal >
        )
    }
}

export function mapStateToProps(state) {
    return {
        modalID: state.get('modalID')
    }
};

export const MyModal = connect<{}, {}, IMyModalProps>(mapStateToProps)(MyModalImpl)

所以当我点击按钮时，showHelloModal方法在键modalID上设置一个值，然后我比较两个模态id，如果两者都相等，那么我会显示模态。

现在我要做的是在ModalWrapper组件中需要MyModal组件的DOMNode，以便在显示模式后打印Hello Modal Word。

如何使用ref获取对DOM节点的引用。如果我使用的是document.getElementById('print-preview')，我可以访问该模式的DOM节点，但我想改用ref。

当我在this.refs组件中登录ModalWrapper时，还有一件事我在控制台中获取了一个Object，如下所示

The console.log on

任何帮助都会被批准。

尝试与ReactDOM.findDOMNode一起使用时，this.refs无法在bootstrap模式上提供null

0 个答案: