onClick 事件在 React 应用程序上不起作用，即使是箭头函数也不行答案

【问题标题】：onClick event not working on a React app, not even with arrow functionsonClick 事件在 React 应用程序上不起作用，即使是箭头函数也不行
【发布时间】：2020-12-11 13:54:21
【问题描述】：

我有一个显示一些图片的模态组件。当您单击前导图像时会触发模态。主要图像组件如下：

const LeadingImage = ({ handleOpen, photos }) => {
  return (
    <ImgWrapper>
      <PropertyImg onClick={() => handleOpen(0)} src={photos[0]} />
    </ImgWrapper>
  );
};

export default LeadingImage;

// Style
let ImgWrapper = styled.div`
  width: 100%;
  pointer-events: auto;
  text-align: center;
  border-bottom: 1px solid lightgrey;
  cursor: pointer;
`;

let PropertyImg = styled.img`
  margin: auto;
  display: block;
  max-height: 500px;
  width: 100%;
  object-fit: cover;
  height: auto;
  pointer-events: inherit;
  z-index: 999;
  cursor: pointer;
`;

我第一次编写此代码时，onClick 事件可以正常工作，但它突然停止工作。现在，每当我单击 PropertyImg 时，控制台中都没有任何活动。 DOM 不会检测到任何点击。光标悬停在主图像上时也不会变成指针。

handleOpen 方法的代码如下：

const handleOpen = async index => {
    await setShow(true)
    setIndex(index)
    console.log("Clicked!")
  }

您知道这种行为的根本原因是什么吗？

编辑：

这是渲染LeadingImage的组件。这是一个精简版：

const SelectedProperty = ({ propertyList }) => {
  // Hooks
  const currentUser = useSelector(state => state.user)
  const [show, setShow] = useState(false);
  const [index, setIndex] = useState(0);
  const handleClose = () => setShow(false);
  const handleOpen = async index => {
    await setShow(true)
    setIndex(index)
    console.log("Clicked!")
  }
  const handleSelect = selectedIndex => {
    setIndex(selectedIndex)
  }

  // Route params
  let params = useParams()

  // Main variables
  var currentProperty = propertyList[params.id]
  var photos = currentProperty.media.photos

  return (
    <Wrapper>
      <PropertyRow>
        <PropertyCol xs={8}>
          <LeadingImage handleOpen={handleOpen} photos={photos} />
        </PropertyCol>
          // More stuff
      </PropertyRow>
    </Wrapper>
  );
};

export default SelectedProperty;

let Wrapper = styled.div`
  margin: auto;
  width: 100%;
  display: flex;
  padding: 0;
  position: relative;
`;

let PropertyCol = styled(Col)`
  padding: 0;
  margin: 30px 20px;
  margin-left: 70px;
  margin-bottom: 50px;
  box-shadow: 1px 3px 5px lightgrey;
  background-color: white;
  border-radius: 5px;
  z-index: -10;
`;

let PropertyRow = styled(Row)`
  width: 100%;
  .modal-content {
    width: 900px;
    max-width: 90% !important;
  }
  z-index: -9999;
`;

【问题讨论】：

特别是因为您写了“它突然停止工作”。您是否可能在布局中使用了新的东西，例如一个可能覆盖所有内容的 div（类似于位置：固定，左：0，上：0，宽度：100vw，高度：100vh）？那些可以阻止底层非子元素的鼠标事件...您是否查看过元素检查器以查看是否有任何东西阻止了鼠标事件？
我认为您需要共享更多代码。我复制了您的LeadingImage 和您的handleOpen，它对我来说非常有效。你如何以及在哪里渲染LeadingImage？
The cursor doesn't turn into a pointer when hovering over the leading image either 听起来像你有一个不可见的 div 覆盖你的按钮捕获点击
感谢所有 cmets。我尝试在这些组件之上找到一个不可见的 div，但我找不到任何东西。我已经添加了渲染LeadingImage组件的组件代码。

标签： javascript html css reactjs styled-components

【解决方案1】：

问题在于您的PropertyRow 样式-您设置的索引为-9999。所以当你点击图片时，你并没有真正点击它，而是实际点击了 div 父级。

您可以通过评论 z-index 来检查这一点。

let PropertyRow = styled(Row)`
  width: 100%;
  .modal-content {
    width: 900px;
    max-width: 90% !important;
  }
  /* z-index: -9999; */
`;

【讨论】：

奥布里加多路易斯！ z-index 确实是个问题。