Question

我正在做一个React项目，在我的项目中，我有两个组件Users和UsersModal。

在“用户”组件中，当我单击“用户模块”表单必须点击的按钮时，“创建用户”按钮就会出现

出现。因此，我已经将UsersModal组件导入了Users组件。现在开始我需要

不显示UsersModal表单，所以请告诉我如何编写函数以首先关闭该表单

组件。

这是Users.js

import React, { Component } from 'react';
import './Users.css';
import { Container, Row, Col, Button } from 'reactstrap';
import UsersModal from '../../Components/UsersModal/UsersModal';

class Users extends Component {
    constructor(props) {
        super(props)

        this.state = {

        }
    }

    render() {
        return (
            <Container>
                <Row>
                    <Col>
                        <div className='mt-3'>
                            <Button outline color="secondary">Create User</Button>
                            <UsersModal></UsersModal>
                        </div>
                    </Col>
                </Row>
            </Container>
        )
    }
}

export default Users

这是UsersModal.js

import React, { Component } from 'react';
import './UsersModal.css';
import {
    Button,
    Col,
    Modal,
    ModalBody,
    ModalFooter,
    ModalHeader,
    Row,
    FormGroup,
    Label,
    Input,
} from 'reactstrap';

class UsersModal extends Component {
    render() {
        return (
            <Row>
                <Col md="6" sm="6" xs="6">

                    <Modal isOpen={true}
                    >
                        <ModalHeader >Create User</ModalHeader>
                        <ModalBody>
                            <FormGroup>
                                <Label for="exampleName">Name</Label>
                                <Input
                                    type='text'
                                    name='name'
                                    placeholder='Enter Your name'
                                />

                            </FormGroup>
                            <FormGroup>
                                <Label for="exampleEmail">Email</Label>
                                <Input
                                    type='email'
                                    name='email'
                                    placeholder="Enter Your email"
                                />
                            </FormGroup>
                        </ModalBody>
                        <ModalFooter>
                            <Button color="secondary">
                                Cancel
                </Button>
                            <Button type="submit" color="primary">
                                Submit
                </Button>
                        </ModalFooter>
                    </Modal>
                </Col>
            </Row>
        )
    }
}

export default UsersModal

Answer 1

您可以在用户组件内部创建布尔属性，例如modalOpen，然后在将modalOpen设置为true时在DOM中有条件地呈现它。

import React, { Component } from 'react';
import './Users.css';
import { Container, Row, Col, Button } from 'reactstrap';
import UsersModal from '../../Components/UsersModal/UsersModal';

class Users extends Component {
    constructor(props) {
        super(props)

        this.state = {
             modalOpen: false,
        }
    }

    render() {
        return (
            <Container>
                <Row>
                    <Col>
                        <div className='mt-3'>
                            <Button outline color="secondary">Create User</Button>
                            {modalOpen ? <UsersModal></UsersModal> : ''}
                        </div>
                    </Col>
                </Row>
            </Container>
        )
    }
}

export default Users

现在，您的“用户”组件可以在模式视图中打开/关闭电源。您可以通过致电this.setState({...this.state, modalOpen: true)

来完成此操作

Answer 2

在您的User组件中，您需要设置一个变量，该变量将用于显示和隐藏模式-

toggleUserModal函数用于隐藏或显示模态，单击按钮将通过将isModalOpen设置为true来显示模态，您可以通过以下方式将此函数传递给UsersModal onClose道具，因此您可以通过点击UsersModal本身中的按钮来关闭模式。

import React, { Component } from 'react';
import './Users.css';
import { Container, Row, Col, Button } from 'reactstrap';
import UsersModal from '../../Components/UsersModal/UsersModal';

class Users extends Component {
    constructor(props) {
        super(props)

        this.state = {
            isModalOpen: false, // initially modal is hidden
        }
    }

    /**
     * This will toggle the modal state
     * if modal is hidden, it will open the modal
     * else is will close the modal
     */
    toggleUserModal = ()=>{
        this.setState((state)=>{
            return{
                isModalOpen: !state.isModalOpen
            }
        })
    }

    render() {
        return (
            <Container>
                <Row>
                    <Col>
                        <div className='mt-3'>
                            <Button onClick={this.toggleUserModal} outline color="secondary">Create User</Button>
                            {this.state.isModalOpen ?
                                <UsersModal
                                    onClose={this.toggleUserModal}
                                />
                                :null}
                        </div>
                    </Col>
                </Row>
            </Container>
        )
    }
}

export default Users

如何在React的类组件中使用函数隐藏模式

2 个答案: