從不同的組件打開相同的模態 Window 並傳達確切的父級

Question

我有模態 Window 組件如下：

    import React, { Component } from 'react';
import * as ReactBootstrap from 'react-bootstrap';

class ModalWindow extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal: false,
        }
    }
    show() {
        this.setState({
            showModal: true,
        })
    }
    hide() {
        this.setState({
            showModal: true,
        })
    }

render() {
    return (
        <ReactBootstrap.Modal
            show={this.state.showModal}
            container={this.props.container}
            bsSize='small'>
            <ReactBootstrap.Modal.Header closeButton={true} >
                <ReactBootstrap.Modal.Title id="contained-modal-title" >
                    Login
                </ReactBootstrap.Modal.Title>
            </ReactBootstrap.Modal.Header>
            <ReactBootstrap.Modal.Body >
                Login Here
            </ReactBootstrap.Modal.Body>
        </ReactBootstrap.Modal>
    );
 }
}
export default ModalWindow

然后我有 3 個不同的組件 A、B、C 如下：

import React, { Component } from 'react';
import ModalWindow from './ModalWindow';

class A extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal: false
        };
    }

    showModal = () => {
        this.setState({ showModal: true });
    };

    hideModal = () => {
        this.setState({ showModal: false });
    };

    render() {
        return (
            <div>
                <h1>You are in A</h1>
                <ModalWindow show={this.state.showModal} container={this} />
                <button type="button" onClick={this.showModal}>
                    open
                </button>
            </div>
        );
    };
}    
export default A

import React, { Component } from 'react';
import ModalWindow from './ModalWindow';

class B extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal: false
        };
    }

    showModal = () => {
        this.setState({ showModal: true });
    };

    hideModal = () => {
        this.setState({ showModal: false });
    };

    render() {
        return (
            <div>
            <h1>You are in B</h1>
                <ModalWindow show={this.state.showModal} container={this} />
                <button type="button" onClick={this.showModal}>
                    open
                </button>
            </div>
        );
    }
}    
export default B

import React, { Component } from 'react';
import ModalWindow from './ModalWindow';

class C extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal: false
        };
    }

    showModal = () => {
        this.setState({ showModal: true });
    };

    hideModal = () => {
        this.setState({ showModal: false });
    };

    render() {
        return (
            <div>
                <h1>You are in C</h1>
                <ModalWindow show={this.state.showModal} container={this} />
                <button type="button" onClick={this.showModal}>
                    open
                </button>
            </div>
        );
    }
}    
export default C

我有一個名為 X 的組件，如下所示：

import React, { Component } from 'react';
import A from './A';
import B from './B';
import C from './C';

class X extends Component {
    render() {
        return (
            <div>
                <h1>React Modal</h1>
                <A />
                <B />
                <C />
            </div >
        );
    }      
}
export default X

class X 在菜單中被調用，但是當我加載 X 時，它只顯示 3 個組件 A、B、C 的打開按鈕 3 次，但它沒有打開模態 ZC89686A387D2B0BC12B3C729CEZB5 What I want is I want to open the Modal Window and the Modal Window to have the information of the which components Open button is clicked and I want to have a TextBox and a Dropdown in the Modal Window and I want to pass the information of the模態 window 到打開模態 window 的同一父組件 - 有什么幫助嗎？ 謝謝

Answer 1

import React, { Component } from 'react';
import A from './A';
import B from './B';
import C from './C';
import ModalWindow from './ModalWindow';

class X extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal: false
        };
    }

    handleChange = (val) => {
      this.setState({
         showModal: val
      })
    }    
    render() {
        return (
            <div>
                <h1>React Modal</h1>
                <A showModal={this.handleChange} />
                <B showModal={this.handleChange} />
                <C showModal={this.handleChange} />
                <ModalWindow show={this.state.showModal} />
            </div >
        );
    }      
}
export default X

---

import React, { Component } from 'react';
import * as ReactBootstrap from 'react-bootstrap';

class ModalWindow extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal: false,
        }
    }
    componentDidMount(){
      this.setState({
        showModal: this.props.show
      })
    }

    componentWillRecieveProps(nextProps){
      if(nextProps.show != this.props.show){
         this.setState({
           showModal: nextProps.show
          })
      }
    }
    show() {
        this.setState({
            showModal: true,
        })
    }
    hide() {
        this.setState({
            showModal: true,
        })
    }

render() {
    return (
        <ReactBootstrap.Modal
            show={this.state.showModal}
            container={this.props.container}
            bsSize='small'>
            <ReactBootstrap.Modal.Header closeButton={true} >
                <ReactBootstrap.Modal.Title id="contained-modal-title" >
                    Login
                </ReactBootstrap.Modal.Title>
            </ReactBootstrap.Modal.Header>
            <ReactBootstrap.Modal.Body >
                Login Here
            </ReactBootstrap.Modal.Body>
        </ReactBootstrap.Modal>
    );
 }
}
export default ModalWindow

---

class A extends Component {
    constructor(props) {
        super(props);
        this.state = {

        };
    }

    changeModalState = (val) => {
        this.props.onChange(val)
    };

    render() {
        return (
            <div>
                <h1>You are in A</h1>

                <button type="button" onClick={() => this.props.showModal(true)}>
                    open
                </button>
                <button type="button" onClick={() => this.props.showModal(false)}>
                    CLOSE
                </button>
            </div>
        );
}
export default A