Question

我有一个视图模式组件（ViewModal.js）

import React from 'react'
import { Button, Modal } from 'react-bootstrap';
import './Modal.css';

class ViewModal extends React.Component {

    constructor() {
        super();
        this.state = {
        }
    }

    handleModalShowHide() {
        this.setState({ showHide: !this.state.showHide })
    }

    render() {
        return (
            <div>
                <Button variant="success" onClick={() => this.handleModalShowHide()}>
                    Write a review
                </Button>

                <Modal show={this.state.showHide}>
                    <Modal.Header closeButton onClick={() => this.handleModalShowHide()}>
                        <Modal.Title>Add your review</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        ModalBody
                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="outline-secondary" onClick={() => this.handleModalShowHide()}>
                            Close
                    </Button>
                        <Button variant="outline-success" onClick={() => this.handleModalShowHide()}>
                            Save Review
                    </Button>
                    </Modal.Footer>
                </Modal>

            </div>
        )
    }

}

export default ViewModal;

我将其导入另一个名为viewcard.js的功能组件中 viewcard.js的逻辑如下


import React from 'react';
import ViewModal from './ViewModal';
import Card from 'Card';

function handleClick(){
    console.log('in handle');
 }
const viewcard = () => {
    return ( 
        <p onClick={() => handleClick()}/>
         Some text in paragraph
        </p>
     );
}

export default viewcard;

卡组件在屏幕上显示一些文本。我想要实现的是，当用户单击该文本时，我想显示模式。

当前，如果我通过调用它在视卡内部渲染模态，它将基于此逻辑线显示一个按钮

                <Button variant="success" onClick={() => this.handleModalShowHide()}>
                    Write a review
                </Button>

我要删除按钮，并且当用户单击viewcard.js中的文本时也会发生相同的行为

Answer 1

ViewCard组件：-

import React, {useState} from 'react';
import ViewModal from './ViewModal';
import Card from 'Card';

const ViewCard = () => {
    const [showModal, setShowModal] = useState(false);

    function handleClick(){
       setShowModal(!showModal)
    }

    return ( 
        <Card onClick={() => handleClick()}/>
        {showModal && <ViewModal hideBtn={true} showModal={true} />}
     );
}

export default ViewCard;

ViewModal组件：

import React from 'react'
import { Button, Modal } from 'react-bootstrap';
import './Modal.css';

class ViewModal extends React.Component {

    constructor() {
        super();
        this.state = {
           showHide: this.props.showModal ? true : false
        }
    }

    handleModalShowHide() {
        this.setState({ showHide: !this.state.showHide })
    }

    render() {
        return (
            <div>
                {this.props.hideBtn ? null : <Button variant="success" onClick={() => this.handleModalShowHide()}>
                    Write a review
                </Button>}

                <Modal show={this.state.showHide}>
                    <Modal.Header closeButton onClick={() => this.handleModalShowHide()}>
                        <Modal.Title>Add your review</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        ModalBody
                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="outline-secondary" onClick={() => this.handleModalShowHide()}>
                            Close
                    </Button>
                        <Button variant="outline-success" onClick={() => this.handleModalShowHide()}>
                            Save Review
                    </Button>
                    </Modal.Footer>
                </Modal>

            </div>
        )
    }

}

export default ViewModal;

但是您应该始终创建一个单独的模态组件。

条件渲染REACT模态组件

1 个答案: