刚接触react，有些东西我还不是特别明白，先做个笔记，以后说不定哪一天就融会贯通了。

1、事件委托在组件容器上，event对象是合成处理过的

首先React中的事件都是采用事件委托的形式，所有的事件都挂载到组件容器上，其次event对象是合成处理过的。一般情况下这些都是内部完成的，我们在使用的时候并不会有什么影响，作为了解即可。

<script type="text/babel">
  let app = document.querySelector('#app');
  let root = ReactDOM.createRoot(app); 

  class Welcome extends React.Component {
    handleClick = (ev) => {
      console.log(ev);  //对象
    }

    render(){
      return (
        <div>
          <button onClick={this.handleClick}>点击</button>
          hello world
        </div>
      );
    }
  }
  let element = (
  <Welcome />
  );

  root.render(element); 
</script>

2、事件中this的处理

在事件中最重要的就是处理this指向问题了，这里我们推荐采用面向对象中的public class fields语法。

 class Welcome extends React.Component {
    handleClick = (ev) => {  //推荐 public class fields
        console.log(this);   //对象
    }
    //handleClick(){   		 //不推荐 要注意修正指向
    //    console.log(this);   //undefined 
    //}
    render(){
        return (
            <div>
                <button onClick={this.handleClick}>点击</button>
                hello world
            </div>
        );
    }
}
let element = (
    <Welcome />
);

3、事件传参，推荐高阶函数的写法

推荐采用函数的高阶方式，具体代码如下：

<script type="text/babel">
  let app = document.querySelector('#app');
  let root = ReactDOM.createRoot(app); 
  
  class Welcome extends React.Component {
    
    handleClick = (num) => {   // 高阶函数
      return (ev) => {
        console.log(num);
      }
    }
    
    render(){
      return (
        <div>
          <button onClick={this.handleClick(123)}>点击</button>
          hello world
        </div>
      );
    }
  }
  
  let element = (
    <Welcome />
  );
  root.render(element);
</script>