Reaction-Bootstrap模式未弹出单击功能-前端问题

React-bootstrap Modal is not popping up onClick of function(Reaction-Bootstrap模式未弹出单击功能)

本文介绍了Reaction-Bootstrap模式未弹出单击功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在一个jhister应用程序中工作。当我创建自己的模式并将状态设置为True时，我的自定义模式将在应用程序的初始呈现时显示，但当我将其设置为False并尝试通过我的函数调用该模式时，它不会出现。

然后，当我调用handleShow()时，浏览器上会出现警告&Hello"；，但它不会调用setShow()。

我也尝试过使用jhister的内置模式，但似乎我必须传递一个包含id的特定URL才会出现

导入

 import { Modal } from 'react-bootstrap';

状态

    const [showModal, setShow] = useState(false);

模态函数

    const handleClose = () => setShow(false);
    const handleShow = () => {
    alert('hello');
    setShow(true);
  };

删除函数

   const handleDelete = row => {
   dispatch(deleteEntity(row));
  };

引导操作列和模式内容

    {
  dataField: 'databasePKey',
  text: 'Actions',
  headerStyle: { backgroundColor: 'red', color: 'white' },
  formatter: (cellContent, row) => {
    return (
      <>
        <div className="btn-group flex-btn-group-container">
          <Button onClick={() => handleShow()} color="danger" size="sm" 
      data-cy="entityDeleteButton">
            <FontAwesomeIcon icon="trash" /> <span className="d-none d- 
      md-inline"></span>
          </Button>
          {showModal === true ? <Modal /> : null}
        </div>
        <Modal show={showModal} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Confirm delete operation</Modal.Title>
          </Modal.Header>
          <Modal.Body>Are you sure you want to delete this Terminal? 
         </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Cancel
            </Button>
            <Button variant="primary" onClick={() => 
          handleDelete(row.id)}>
              Confirm
            </Button>
          </Modal.Footer>
        </Modal>
       </>
      );
      },
      },

推荐答案

错误如下：handleShow是函数。调用ModalContent组件时应检查状态变量

已修复代码：

    <div className="btn-group flex-btn-group-container">
        <Button onClick={() => handleShow()} color="danger" size="sm" datacy="entityDeleteButton">
          <FontAwesomeIcon icon="trash" /> <span className="d-none d-md-inline"></span>
        </Button>
        {showModal === true ? <ModalContent /> : null}
    </div>

这篇关于Reaction-Bootstrap模式未弹出单击功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！