Question

我正在尝试访问img标签的src属性。通过使用e.target，它可以为我提供整个标签集，但是我认为可以通过执行e.target.img.src来访问它，但是它没有用。我该怎么办？

handleClickOpen(e) {
  console.log(e.target);
}


<Button onClick={this.handleClickOpen}>
  <img src={image.image} alt="product" />
</Buttonz>

Answer 1

如果您需要src属性的值和合成事件的处理程序，则可以使用lambda函数并将其作为第二个参数传递，如下所示：

handleClickOpen(event, imageSrc) {
    console.log(imageSrc);
}

<Button onClick={ event => this.handleClickOpen(event, image.image) }>
    <img src={image.image} alt="product" />
</Button>

请考虑这只是一个快速的解决方案，这不是最佳实践，没有对内联Lambda进行适当的建议，

Answer 2

您应该了解事件的工作方式。 e.target是用户单击的最深层元素。考虑下面的例子。

<button onClick={(e) => {console.log(e.target)}} style={{padding: '20px',}}>
    <img src={'someUrl'} alt="product" />
</button>

如果用户直接点击图片e.target === <img src="someUrl" alt="product">。如果用户单击按钮e.target === <button style="padding: 20px;">

的填充

我建议在这里使用react ref。因此，您可以将ref保存到图像中，并在需要时调用它。

如何在React中使用事件处理程序访问子标签的属性

2 个答案: