Javascript 从不同组件打开相同的模式窗口并与确切的父组件通信_Javascript_Reactjs

Javascript 从不同组件打开相同的模式窗口并与确切的父组件通信

javascript reactjs

Javascript 从不同组件打开相同的模式窗口并与确切的父组件通信,javascript,reactjs,Javascript,Reactjs,我有如下模态窗口组件： import React, { Component } from 'react'; import * as ReactBootstrap from 'react-bootstrap'; class ModalWindow extends Component { constructor(props) { super(props); this.state = { showModal: false,

我有如下模态窗口组件：

    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

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

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

import React，{Component}来自'React'；
从“react bootstrap”导入*作为react bootstrap；
类ModalWindow扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showModal：错，
}
}
show（）{
这是我的国家({
是的，
})
}
隐藏（）{
这是我的国家({
是的，
})
}
render（）{
返回(
登录
在这里登录
);
}
}
导出默认ModalWindow

然后我有3个不同的组件A，B，C，如下所示：

    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

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

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

import React，{Component}来自'React'；
从“/ModalWindow”导入ModalWindow；
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showModal:错误
};
}
showModal=（）=>{
this.setState（{showmodel:true}）；
};
hideModal=（）=>{
this.setState（{showmodel:false}）；
};
render（）{
返回(
你正处于一种危险之中
打开
);
};
}    
导出默认值A
从“React”导入React，{Component}；
从“/ModalWindow”导入ModalWindow；
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showModal:错误
};
}
showModal=（）=>{
this.setState（{showmodel:true}）；
};
hideModal=（）=>{
this.setState（{showmodel:false}）；
};
render（）{
返回(
你在B区
打开
);
}
}    
导出默认值B
从“React”导入React，{Component}；
从“/ModalWindow”导入ModalWindow；
C类扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
showModal:错误
};
}
showModal=（）=>{
this.setState（{showmodel:true}）；
};
hideModal=（）=>{
this.setState（{showmodel:false}）；
};
render（）{
返回(
你是C
打开
);
}
}    
导出默认值C

我有一个叫做X的组件，如下所示：

    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

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

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

import React，{Component}来自'React'；
从“/A”导入A；
从“/B”导入B；
从“/C”导入C；
类扩展组件{
render（）{
返回(
反应模态
);
}      
}
导出默认值X

在菜单中调用类X，但当我加载X时，它仅显示3个组件A、B、C的打开按钮3次，但它没有打开模式窗口。我想要的是我想要打开模态窗口和模态窗口，以获得单击了哪些组件打开按钮的信息，我想要在模态窗口中有一个文本框和一个下拉列表，我想要将模态窗口的信息传递给打开模态窗口的同一个父组件-请提供帮助？谢谢

从“React”导入React，{Component}；
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

从“/A”导入A；
从“/B”导入B；
从“/C”导入C；
从“/ModalWindow”导入ModalWindow；
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showModal:错误
};
}
handleChange=（val）=>{
这是我的国家({
showModal:val
})
}    
render（）{
返回(
反应模态
);
}      
}
导出默认值X

import React，{Component}来自'React'；
从“react bootstrap”导入*作为react bootstrap；
类ModalWindow扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showModal：错，
}
}
componentDidMount（）{
这是我的国家({
showModal:this.props.show
})
}
组件将接收道具（下一步）{
if（nextrops.show！=this.props.show）{
这是我的国家({
showModal:nextrops.show
})
}
}
show（）{
这是我的国家({
是的，
})
}
隐藏（）{
这是我的国家({
是的，
})
}
render（）{
返回(
登录
在这里登录
);
}
}
导出默认ModalWindow

A类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
};
}
changeModalState=（val）=>{
this.props.onChange（val）
};
render（）{
返回(
你正处于一种危险之中
this.props.showModal（true）}>
打开
this.props.showModal（false）}>
接近
);
}
导出默认值A

Hi我在尝试上述代码时遇到以下错误，请提供帮助？×TypeError:this.props.showmodel不是单击C:/Users/aaleem/Desktop/DevelopedProjects/reactdevextremexample/DropdownListBoxEx/ClientApp/src/components/DialogModals/a.jsx时的函数：21 18 | 19 |您处于20 |>21 | this.props.showmodel（true）}>|^22 |打开23 | 24 | this.props.showModal