Question

我有一个模态窗口，如果用户单击模态本身（黑色背景），我希望将其隐藏，但是单击会被攀登者触发。这是示例：

package-lock.json

如何仅针对模式本身触发事件？

Answer 1

嗯，这项工作有效，但是如果您点击包装程序div-模式将不会隐藏：（

经过一番谷歌搜索后，找到了解决方法。关键是您需要停止onClick事件从父级传播到子级。就我而言，我只是用onClick = {e => e.stopPropagation（）}按div包装了我的组件。

import React from 'react'
import styled from 'styled-components'

export function Modal({ show, showModalSet, children }) {
  return (
    <DivModal onClick={() => showModalSet(false)} show={show}>
      <div onClick={e => e.stopPropagation()}>{children}</div>
    </DivModal>
  )
}

const DivModal = styled.div`
   position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: ${({ show }) => (show ? 'block' : 'none')};
  z-index: 10;
  overflow-y: scroll;
`

组件使用：

<Modal show={showModal} showModalSet={showModalSetFunctionInUsePlace}>

Answer 2

我现在很高兴的另一种方法是使用refs并比较单击了哪个组件：

def combine(extracted):
    if any(sparse.issparse(fea) for fea in extracted):
        stacked = sparse.hstack(extracted).tocsr()
        stacked = stacked.toarray()
    else:
        stacked = np.hstack(extracted)

    return stacked

React钩子onClick仅针对父级触发（模态）

2 个答案: