Javascript onClick在图像标记的呈现本身中被调用？

我有一系列图像标签，上面有

onClick

。在

onClick

中，我调用了一个名为camera的函数，其中包含参数 对于imagetag1，2表示imagetag2，3表示imagetag3 在照相机中，我正在检查参数并执行设置状态但是当呈现自身时，onClick被调用了我不理解这种现象

是否有其他方式将id发送到onClick函数

？。
这是我的代码

camera: function(id){

  console.log(id);
    var that = this;
      navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
        destinationType: Camera.DestinationType.DATA_URL
      });

      function onSuccess(imageData) {

          var finalimage = "data:image/jpeg;base64," + imageData;

          var temp;
          if(that.id === 1){
            temp ="image1";
          }else if(that.id ===2){
            temp = "image2";
          }else if(that.id === 3){
             temp = "image3"; 
          }

          that.setState({temp:finalimage});

      }


     function onFail(message) {
        alert('Failed because: ' + message);
     }


 },

render: function(){
return(
      <div>
      <img  className="addpicture" onClick={this.camera(1)} src={this.state.image1} />
      <img  className="addpicture" onClick={this.camera(2)} src={this.state.image2} />
      <img  className="addpicture" onClick={this.camera(3)} src={this.state.image3} />
      </div>
      ); 
   }

摄像机：功能（id）{
console.log（id）；
var=这个；
navigator.camera.getPicture（onSuccess，onFail，{质量：50，
destinationType:Camera.destinationType.DATA\u URL
});
函数onSuccess（imageData）{
var finalimage=“数据：图像/jpeg；base64，”+imageData；
无功温度；
如果（that.id==1）{
temp=“image1”；
}else if（that.id==2）{
temp=“image2”；
}else if（that.id==3）{
temp=“image3”；
}
setState（{temp:finalimage}）；
}
函数onFail（消息）{
警报（'失败原因：'+消息）；
}
},
render:function（）{
返回(
); 
}

似乎

onClick

这里被分配了整个

{this.camera（1）}

计算结果的值。因此调用此函数

我不知道如何通过event属性和使用

this

分配这些事件

您应该像现在一样生成模板，但随后（或在临时DOM节点中）使用常规的

addEventListener

函数分配事件

---

在这样做的过程中，当从对象中分配给事件时，处理程序（摄影机函数）可能仍然是一个私有函数。

这很奇怪，但您做得非常正确，唯一的问题是您必须使用其他属性，而不是调用您的函数，下面是如何操作的

camera: function(event){
    var id = parseInt(event.target.getAttribute('data-cam'));
    console.log(id);
    // other code 
}
render: function(){
return(
  <div>
  <img className="addpicture" onClick={this.camera} src={this.state.image1} data-cam={1} />
  <img className="addpicture" onClick={this.camera} src={this.state.image2} data-cam={2} />
  <img className="addpicture" onClick={this.camera} src={this.state.image3} data-cam={3} />
  </div>
  ); 
}

摄像机：功能（事件）{
var id=parseInt（event.target.getAttribute（'data-cam'）；
console.log（id）；
//其他代码
}
render:function（）{
返回(
); 
}

---

单击事件或任何其他事件将事件对象作为参数传递给自定义事件处理程序函数，因此您只需检测该Dom元素并获取所需的属性即可从单击事件中获取currentTarget

camera: function(event){
  event.currentTarget.getAttribute('data-cam')
}

<img className="addpicture" onClick={this.camera} src={this.state.image1} data-cam={1} />

摄像机：功能（事件）{
event.currentTarget.getAttribute（'data-cam'））
}

如果另一个答案被接受，我会在得到它的时候纠正我如何解决这个问题。 我不得不使用

bind

，不知道为什么

因此，请这样使用：

---

我在不绑定事件处理程序的情况下成功地做到了这一点

在渲染（）期间计算：

单击时评估：

<img src={image} onClick={(e) => func()} />

func（）}/>

所以你的意思是说这是react的问题？哦，好的。我想你本可以提到react涉及的；）不在标签中。在这种情况下，答案是不合适的。如何获取摄像机id？@gates基本上是单击事件将参数传递给摄像机函数，因此您只需检测Dom元素并获取所需的AttributeLemm检查，我看到您在不断进行编辑；）@gates I love answerCheck的全面覆盖其他变体，使用console.log（event.target）查看单击了哪个元素，以及它是否具有该cameraid属性。这个解决方案基本上回答了这个问题，您只需要在JavaScript本身方面有更多的经验，因为获取Dom元素并检索其属性与reactjs没有任何关系

<img src={image} onClick={(e) => func()} />