当我单击其中的任何位置时，如何阻止我的模态关闭

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 属性，而是使用 state 变量来控制显示。

<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);
}