当我点击里面的任何地方时，如何阻止我的模态关闭

Question

我在一个组件中制作了一个模态，数据工作正常，它是动态的，非常完美。问题是，当我打开它时，似乎每当我点击模态框内的任何地方时，它都会再次关闭。

模式是使用 useState 挂钩管理的。我认为问题出在我的 onClick 调用中。有什么建议吗？

const LeaveRequestsUnits = () => {
  let [data, setData] = useState([]);
  let [modalState, setModalState] = useState(false);
  let modalOnOff = () => {
    setModalState(!modalState);
  };
  let [selectedUnit, setSelectedUnit] = useState('');
  let updateSelectedUnit = (item) => {
    setSelectedUnit(item);
    
      const getLeaveUnits = data.map((item) => {


// fct to update the modalState and display-block the modal
    const openModal = (item) => {
      updateSelectedUnit(item);
      modalOnOff();
      $('.modalBackground').css('display', 'block');
    };

    const modal = () => {
      return (
        <div>
          <p>{selectedUnit.note}</p>
          <p>{selectedUnit.start}</p>

          <p>{selectedUnit.end}</p>
          <a href="https://www.google.com">Google</a>
          <h1>Close</h1>
        </div>
      );
    };

    // display:none the modal if the modalState is false
    if (!modalState) {
      $('.modalBackground').css('display', 'none');
    } 


    if (item.end >= today && item.approved !== false) {
      return (
        <div
          className={unitColour}
          key={item.reqID}
          onClick={() => openModal(item)}
        >
          <div className='unitLeft'>
            <img src={statusIcon} alt='Status Icon' id='statusIcon' />
          </div>

          <div className='unitMiddle'>
            <p id='unitLeaveType'>{leaveTypeName}</p>
            <p id='unitDate'>{startEndDate(item.start, item.end)}</p>
          </div>

          <div className='unitDivider'></div>

          <div className='unitRight'>
            <p id='unitDuration'>
              {convertTimestamp(item.duration, item.type)}
            </p>
          </div>
          {/* modal */}
          <div className={`modalBackground modalShowing-${modalState}`}>
            {modal()}
          </div>
          {/* end modal */}
        </div>
      );
    }
  });

  return <div className='requestsContainer

CSS 下面:

.modalBackground {
  display: none;
  z-index: 10000;
  width: 80vw;
  height: 250px;
  background-color: white;
  border-radius: 15px;
  position: absolute;
  top: 10vh;
  overflow: hidden;
  color: black;
  opacity: 0;
  pointer-events: none;
  cursor: auto;
}

.modalShowing-true {
  /* display: none;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.3; */
  opacity: 1;
  pointer-events: auto;
}

Answer 1

当您定义模态组件时，您需要告诉它防止点击它冒泡到将尝试关闭模态的父元素点击侦听器。

const cancelClick = useEffect( (event) => {
  event && event.stopPropagation();
}, []) // only need to create this function once

const modal = () => {
  return (
    <div onClick={cancelClick}>
      <p>{selectedUnit.note}</p>
      <p>{selectedUnit.start}</p>

      <p>{selectedUnit.end}</p>
      <a href="https://www.google.com">Google</a>
      <h1>Close</h1>
    </div>
  );
};

我强烈建议您在这里也停止使用 jquery。在此组件中，它是一个超级简单的更改，只需删除 jquery 调用以更改背景上的显示 css 属性，而是使用状态变量来控制显示。

<div className={`modalBackground${!!modalState ? ' open' : ''}`}>
  {modal()}
</div>

然后你可以为它清理css。我放弃了 display: none; 样式并使用了 transform: scale(0);。这为您决定如何显示模式提供了更大的灵活性（淡入效果很好）。

.modalBackground {
  position: absolute;
  top: 10vh;
  z-index: 10000;
  overflow: hidden;

  width: 80vw;
  height: 250px;

  opacity: 0;
  transform: scale(0);
  background-color: white;
  color: black;

  border-radius: 15px;
  cursor: auto;

  /* here you can add a transition on both opacity and scale to make the modal animate in. */
}

.modalBackground.open {
  opacity: 1;
  transform: scale(1);
}

当我点击里面的任何地方时，如何阻止我的模态关闭

How do I stop my modal from closing when I click anywhere inside it

javascript

modal-dialog

reactjs