1

我在按下按钮时调用了一个组件以在屏幕上显示模式，但它无法正常工作。

const  handleCardClick=(cardObject)=> {
  
  this.state={
    "show":true
  }

 console.log("pressed")

return (<Modal
show={true}
onHide={() => this.setState({"show":false})}
dialogClassName="modal-90w"
aria-labelledby="example-custom-modal-styling-title"
>
<Modal.Header closeButton>
  <Modal.Title id="example-custom-modal-styling-title">
    Custom Modal Styling
  </Modal.Title>
</Modal.Header>
<Modal.Body>
  <p>
    Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde
    commodi aspernatur enim, consectetur. Cumque deleniti temporibus
    ipsam atque a dolores quisquam quisquam adipisci possimus
    laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod
    accusamus eos quod. Ab quos consequuntur eaque quo rem! Mollitia
    reiciendis porro quo magni incidunt dolore amet atque facilis ipsum
    deleniti rem!
  </p>
</Modal.Body>
</Modal>
);
}

显示“按下”，但我在屏幕上看不到模态。提前致谢

4

1 回答 1

1

您的代码看起来不像标准的反应组件 IMO，但我想您不需要函数来显示组件。该组件应该出现在您的渲染方法中，并且它的“打开”属性是使其显示或不显示的原因。

此外，您还没有指定您正在使用哪个库，但“show”对我来说听起来并不熟悉。例如，MUI 将其命名为“isOpen={modalOpen}”。无论如何，我希望下面的片段可以提供帮助。

class MyButtonModalComponent extends React.Component {

    state = {
        modalOpen: false
    }

    render(){

        const { modalOpen } = this.state;

        return (
            <div>
                <Button onClick={e=>this.setState({ modalOpen: true })}>Click here to open a modal window</Button>
                <Modal
                    show={modalOpen}
                    onHide={() => this.setState({ modalOpen: false })}
                    dialogClassName="modal-90w"
                    aria-labelledby="example-custom-modal-styling-title"
                    >
                    <Modal.Header closeButton>
                        <Modal.Title id="example-custom-modal-styling-title">
                            Custom Modal Styling
                        </Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <p>Ipsum ... </p>
                    </Modal.Body>
                </Modal>
            </div>
        )
    }

}
于 2020-09-20T09:44:38.650 回答