javascript - React Js 获取被点击的元素

Question

https://jsbin.com/diyenakife/edit?html,js,output

JSX

let MY = React.createClass({

 sendMsg : function(e){
     alert($(e.target).attr('data-id'));
     //sendMsgButton = ??

 },
  render: function() {
    return (


      <button is class = "send_msg"
      data-id = "10"
      onClick = {
        this.sendMsg
      } >
      Send Message
      <span> INSIDE SPAN </span> <span className = "sendMsgIcon" > ICON </span> </button>
    );

  }
});


        ReactDOM.render(
          <MY />,
          document.getElementById("container")
        );    

每当我单击按钮 sendMsg 时，我都希望将按钮元素放在 sendMsg 函数中。

但是每当我点击按钮的 span 或子元素时 e.target 返回 span/child 元素而不是按钮本身(我知道这就是 e.target 的作用)

但是我如何获取被点击的元素？

在 Jquery 中可以使用

$('.sendMsg').click(function(){
  let sendMsgButton = $(this);
});

如何获得确切的元素？

Answer 1

您应该使用e.currentTarget而不是e.target

示例:

sendMsg : function(e){
  alert($(e.currentTarget).attr('data-id'));
  //sendMsgButton = ??
}

希望这有帮助!