[React日志]08-React中事件的写法总结

1:事件与原生事件类型 react中式on+首字母大写的事件名 例如onClick

如图 只需要on以后常用的事件都会提示出来

2:在Content.js中新建一系列的按钮来对事件进行学习

2.1 普通的函数绑定

  <button onClick={
    
    function(){
    
    alert('6666')}}>按钮1</button>

2.2 箭头函数的绑定

  <button onClick={
    
    ()=>{
    
    
     alert("7777");
  }}>按钮2</button> 

2.3 箭头函数带参数

 <button onClick={
    
    (e)=>{
    
    
   e.target.style.color="red";
  }}>按钮3</button>  

2.4

页面部分

   <button onClick={
    
    
	       this.show
	}>按钮4</button>

在render的上面定义一个函数 细节看alert中的提示

  constructor(props){
    
    
        super(props);
        this.state={
    
    
            num:10
        }
        //this.show9 = this.show9.bind(this);
    }
 
    show(){
    
    
            alert("按钮4被点击 但是里面this会脱离上下文关系");
            alert(this.state.num);//报错 this是undefined
    }

2.5 利用箭头函数 对this指向进行加强 this就是对象

  <button onClick={
    
    //show5是不能带参数
      this.show5
    }>按钮5</button>

函数的定义

 show5=()=>{
    
    
        alert(this.state.num);
    }

2.6 函数可以接收参数

<button onClick={
    
    //show6能带参数
                   ()=>{
    
    
                      this.show6("66666") 
                   }
                 }>按钮6</button>

函数的定义

 show6=(content)=>{
    
    
        alert(content);
    }

2.7 函数既能接收参数 也能返回触发的事件源

 <button onClick={
    
    //show7能带参数 还能带事件源
                   (e)=>{
    
    
                      this.show7("7777",e); 
                   }
                 }>按钮7</button>

函数的定义

 show7=(content,e)=>{
    
    
        e.target.innerHTML= content;
    }

2.8 利用bind加强this的指向

<button onClick={
    
    this.show8.bind(this)}>按钮8</button>
函数的定义

 show8(){
    
    
        alert(this.state.num);
    }

2.9 在state中利用bind加强指向 bind就是函数执行时候 this的指向

   <button onClick={this.show9} >按钮9</button>

函数的定义 show9里面的this就指向谁对象

 constructor(props){
    
    
        super(props);
        this.state={
    
    
            num:10
        }
        this.show9 = this.show9.bind(this);
    }
    show9(){
    
    
        alert(this.state.num);