Question

我遇到一个问题，当我用React单击图像时，我想弹出警报。不幸的是，当我单击图像时，我无法弄清楚为什么这种方法不起作用。有人可以帮我解决这个问题吗？

  state = {
    cards
  }

  handleClick = () => {

    alert("I have been clicked");
    console.log("clicked")
  }

  render = () => {

    return (
      <Router>
      <div className="App">
        <Navbar /> 
        <ImageContainer>
          {this.state.cards.map(card => {
            return <ImageCard handleClick = {this.handleClick} image={card.image}  />
          })};
        </ImageContainer>

      </div>
      </Router>
    );
  }

}

这是我要使用的ImageCard：

export const ImageCard = (props) => (
  <Col lg={4}>
  <Card>
  <Card.Img variant="top" src={props.image} />    
  </Card>
  </Col>
);

Answer 1

您正在将名为handleClick的道具传递到<ImageCard />组件。看一下您的<ImageCard />。一旦收到该道具，它就什么也不做，因此它不会以任何方式用于onClick。尝试将道具从handelClick重命名为onClick，或将handeClick向下传递到<Card />中的<Col />或<ImageCard />组件。

使用React单击图像时无法获得警报以工作

1 个答案: