React

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class LoggingButton extends React.Component {
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 所以就不需要bind this了,但是没有办法传自定义参数 
  handleClick = (e) => {
    console.log('this is 1:',this);
    console.log('this is 1:',e.target.id);
    //自定义属性的值 
     console.log('this e.data:', e.currentTarget.getAttribute('data-xxx'));
     
  }
  
  //注意handleClick和handleClick2的区别
  //这种 方法取不e,因为所有的参数都可以自定义
    handleClick2(id) {
    console.log('this 参数:', id);   
  }
  
  /*
 <!-- 
 也可以取自定义参数,也可以有e,但是要慎用
 第三种不好,  每次渲染 LoggingButton 时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。
      -->
  */
  
     handleClick3(e,id) {
    console.log('this id:', id);
    console.log('this e.id:', e.target.id);
    console.log('this e.data:', e.currentTarget.getAttribute('data-xxx'));
  }
  


  render() {
    return (
     <div>
      <button id="123" data-xxx="789" onClick={this.handleClick}>
        Click me1
      </button>
      
            <button id="1234" data-xxx="7890" onClick={this.handleClick2.bind(this, 123)}>
        Click me2
      </button>
      

        <button id="456" data-xxx="7890" onClick={(e) => this.handleClick3(e,'123456')}>
        Click me3
      </button>
      
      </div>
      
    );
  }
}

ReactDOM.render(<LoggingButton />, document.querySelector("#app"))