4.React事件、方法等介绍

一、React事件

• 1.定义方法

 run() {
        alert('你好')
    }

• 2.页面中引用

<div>
       <button onClick={this.run}>点击</button>
</div>

• 3.页面显示效果

  
  
  

  显示效果

二、获取数据的方法

• 1.第一种方法

getData(){
        alert(this.state.msg)
    }

• 2.页面中引用（改变this指向）

 <button onClick={this.getData.bind(this)}>获取数据-第一种方法</button>

• 3.页面显示效果

  
  
  

  显示效果
• 4.第二种方法

    constructor() {
        super();
        this.state = {
            msg:'我是Home组件',
            message:'我是一个message'
        }
        this.getMessage = this.getMessage.bind(this)
    }
getMessage(){
        alert(this.state.message)
    }

• 5.页面中引用（不改变this指向）

 <button onClick={this.getMessage}>获取数据-第二种方法</button>

• 6.页面显示效果

  
  
  

  显示效果
• 7.第三种方法

//  箭头函数
  getName = () => {
        alert(this.state.username)
    }

• 8.页面中引用（不改变this指向）

 <button onClick={this.getName}>获取数据-第三种方法</button>

• 9.页面显示效果

  
  
  

  显示效果

三、改变state里面的数据

• 1.定义方法

// 使用箭头函数
 getState=()=>{
        this.setState({
            msg:'我是更改后的Home组件'
        })
    }

• 2.页面中引用

 <button onClick={this.getState}>改变state里面的值</button>

• 3.页面显示效果

  
  
  

  改变前
  
  
  

  改变后

四、执行方法传值

1.定义方法

// 单个传值
setName = (str) => {
        this.setState({
            username: str
        })
    }
// 多个传值
setName = (str,str2) => {
        this.setState({
            username: str + str2
        })
    }

• 2.页面中引用

// 单个传值
<button onClick={this.setName.bind(this,'大古')}>执行方法传值</button>
// 多个传值
 <button onClick={this.setName.bind(this,'大古','丽娜')}>执行方法传值</button>

• 3.页面显示效果

  
  
  

  单个传值
  
  
  

  多个传值
  
  

  好了，今天的分享就到这里了！
  愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。

  
  
  

  小晴天