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>
        )
    }

ReactJS模态窗口

1 个答案: