反应中按钮的意外行为答案

【问题标题】：Unexpected behavior with button in react反应中按钮的意外行为
【发布时间】：2018-07-16 15:56:47
【问题描述】：

我在我的反应渲染函数中使用下一个代码：

<button>
  <img
    src="./assets/iconspng/icons8-create-50.png"
    alt="Edit Pilot Application"
    onClick={this.buttonAction}
  />
  Show Clients Info                                     
</button>

我遇到的问题是要运行操作 this.buttonAction 我只能点击 icons8-create-50.png 加载的图片。如果我单击“显示客户信息”标签，则没有任何反应。我需要能够同时单击标签和图片以使操作运行。有没有办法做到这一点？

【问题讨论】：

您是否尝试过将onClick 放在button 上？
你指的是onClick={this.buttonAction}吗？
是的，没错。移动整段代码。
哈哈哈......我想我知道你们男人，，，，男孩！让我试试
@JoseCabreraZuniga - 如果你想删除问题，请告诉我，我可以删除下面的答案，这样你就可以这样做了。

标签： javascript reactjs button

【解决方案1】：

我遇到的问题是要运行操作 this.buttonAction 我只能点击 icons8-create-50.png 加载的图片。如果我单击“显示客户信息”标签，则没有任何反应。

这是因为onClick 在图像上，而不是按钮上。所以点击标签不会触发它。

将onClick 放在button 上，而不是img。（如果用户点击img，它将传播到button。）

<button onClick={this.buttonAction}>
  <img
    src="./assets/iconspng/icons8-create-50.png"
    alt="Edit Pilot Application"
  />
  Show Clients Info                                     
</button>

【讨论】：