ReactJS模态窗口

Question

我不知道如何使我的应用程序正常工作。 我有一个组件ContactAdd说onClick必须渲染组件ModalWindow 。 ModalWindow具有参数isOpened={this.state.open} 。 如何从父组件控制此状态？

import React from 'react';

import ContactAddModal from './ContactAddModal.jsx';

import './ContactAdd.css';

export default class ContactAdd extends React.Component {
    constructor(props){
        super(props);
    }
    render() {
        return (
            <div className="add-contact" onClick={ ??????? }>
                <img src="./img/add.png" />
                <ContactAddModal/>
            </div>
        )
    }
}




import React from 'react';

export default class ContactAddModal extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            show: false,
        };
        this.handleCloseModal = this.handleCloseModal.bind(this);
    }

    handleCloseModal () {
        this.setState({ show: false });
    }

    render() {
        return (
            <div className="modal" isOpened={this.state.show}>
                <button onClick={this.handleCloseModal}>Close Modal</button>
            </div>
        )
    }

Answer 1

在这里使模式成为无状态组件可能会更简单。 折衷方案是您必须处理每个模式的关闭，我认为这是可以接受的。 这个答案只是一个选择，绝不是绝对的真理。

它可能看起来像这样

export default class ContactAdd extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            showModal: true
        };
        this.hideModal = this.hideModal.bind(this);
    }

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

    render() {
        return (
            <div className="add-contact">
                <img src="./img/add.png" />
                <ContactAddModal handleClose={this.hideModal} isOpened={this.state.showModal} />
            </div>
        )
    }
}

现在，模态：

export default class ContactAddModal extends React.Component {
    render() {
        return (
            <div className="modal" isOpened={this.props.isOpened}>
                <button onClick={this.props.handleClose}>Close Modal</button>
            </div>
        )
    }