reactjs父调用对话框子对话框中的显示对话框

时间:2020-05-01 00:43:46

标签: reactjs dialog

从父组件中,我调用一个对话框AlertDialog,并发送带有值为true的道具openIt的

这是父组件

...
       {this.state.open && (
                    <Dialog extends openit={true} />
                ) }
...

子组件对话框

import ...;
...
let isOpen = false;
class Dialog extends extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
        };
    }


    componentDidMount() {
    }

    static getDerivedStateFromProps(props, state) {
        if (state.open === false && isOpen === false) {
            state.open = props.openIt;
            return state.open;
        }
        return null;
    }


    handleClose = () => {
        this.setState({ open: false });
        isOpen = true;
    };

    render() {
        const { open } = this.state;
        return (
            <Dialog open={open} >
            </Dialog>
    ...

在此方法中,我将props传递给openIt以使其处于打开状态,因此该方法将返回true作为open的值,并显示对话框。

当我单击“确定”以关闭对话框时,将触发方法handleClose,并且open的值将为false,但问题getDerivedStateFromProps将再次被触发 第二次触发

{this.state.open && (
                        <Dialog extends openit={true} />
                    ) }

因为状态为true,所以不会显示模态 我不知道如何解决这个问题

0 个答案:

没有答案
相关问题