时间戳

首页 > 解决方案 > onClick 事件在 React 应用程序上不起作用，即使是箭头函数也不行

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

问题描述

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

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;
`;

标签： javascripthtmlcssreactjsstyled-components

解决方案

问题在于您的PropertyRow风格-您将索引设置为-9999。因此，当您单击图像时，您并没有真正单击它，而是实际上单击了 div 父级。

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

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

推荐阅读