zoukankan      html  css  js  c++  java
  • react事件方法


    在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如:this.state),通常需要将事件处理函数运行时的 this 指向当前组件实例。
    绑定事件处理函数this的几种方法:
    第一种方法:

     run(){
    
                alert(this.state.name)
          }
          <button onClick={this.run.bind(this)}>按钮</button>

    第二种方法:
        构造函数中改变

      this.run = this.run.bind(this);
    
    
         run(){
    
                alert(this.state.name)
          }
         <button onClick={this.run>按钮</button>

    第三种方法:

         run=()=> {
                alert(this.state.name)
          }
    
        <button onClick={this.run>按钮</button>

    demo:

    import React from 'react';
    
    import '../assets/css/index.css';
    
    
    class Home extends React.Component{
    
        // 子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象
    
        constructor(props){
            super(props);   //固定写法
    
            this.state={
    
                msg:'我是一个home组件',
    
                message:'我是一个message',
    
                username:'name'
               
            }   
    
            //第二种改变this指向的方法
    
            this.getMessage= this.getMessage.bind(this);
    
        }
    
        run(){
            alert('我是一个run方法')
            
        }
    
        getData(){
    
            alert(this.state.msg);
        }
    
    
        getMessage(){
    
            alert(this.state.message);
        }
    
        getName=()=>{
    
            alert(this.state.username);
        }
    
    
    
        //第三种改变this指向的方法
        setData=()=>{
    
            //改变state的值
    
            this.setState({
    
                msg:"我是一个home组件 这是改变后的值"
            })
    
        }
    
        setName=(str)=>{
    
            //改变state的值
    
            this.setState({
    
                username:str
            })
    
        }
    
        render(){
            return(
                <div>
                    <h2>{this.state.msg}</h2>    
                     <h2>{this.state.username}</h2>     
                    <button onClick={this.run}>执行方法</button>
                    <br />
                    <br />
    
                    <button onClick={this.getData.bind(this)}>获取数据--第一种改变this指向的方法</button>
    
                    <br />
                    <br />
                     <button onClick={this.getMessage}>获取数据--第二种改变this指向的方法</button>
                    <br />
                    <br />
                     <button onClick={this.getName}>获取数据--第三种改变this指向的方法</button>
                     <br />
                    <br />
    
                     <button onClick={this.setData}>改变state里面的值</button>
    
                   <br />
                    <br />
    
                     <button onClick={this.setName.bind(this,'张三')}>执行方法传值</button>
                   {/* <button onClick={this.setName.bind(this,'张三','李四')}>执行方法传值</button> */}             
                </div>
            )
    
        }    
    }
    export default Home;
  • 相关阅读:
    c++类中比较重要的几个函数
    rosbag使用方法
    2.urllib库的使用
    什么叫做API?
    1.爬虫基础
    正则表达式

    time模块
    random模块
    日志处理
  • 原文地址:https://www.cnblogs.com/loaderman/p/11551047.html
Copyright © 2011-2022 走看看