美文网首页前端开发
第4节 React事件 方法、 React定义方法的几种方式

第4节 React事件 方法、 React定义方法的几种方式

作者: 小沙坨 | 来源:发表于2019-05-12 17:05 被阅读0次

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

    一、绑定事件处理函数this的几种方法

    1.1 第一种方法:在onClick事件中直接使用bind(this)

    //定义函数
    run(){
      alert(this.state.name)
    }
    
    //调用函数
    <button onClick={this.run.bind(this)}>按钮</button>
    

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

    //在构造函数中改变this指向
    this.run = this.run.bind(this);
    
    //定义函数
    run(){
       alert(this.state.name)
    }
    
    //调用函数
    <button onClick={this.run>按钮</button>
    

    1.3 第三种方法:使用箭头函数

    //定义箭头函数
    run=()  => {
       alert(this.state.name)
    }
    
    //调用函数
    <button onClick={this.run>按钮</button>
    

    二、改变属性值

    改变属性值时,this的改变与绑定时一致,最常用的是箭头函数

    this.setState({
            name:'李四',
            age:'35',
            address:'青岛市李沧区书院路123号'
        }
    )
    

    定义箭头函数如下:

    //改变属性值
    setMsg=() =>{
        this.setState({
                name:'李四',
                age:'35',
                address:'青岛市李沧区书院路123号'
            }
        )
    }
    

    调用箭头函数如下:

    <button type="button" className="btn btn-primary" onClick={this.setMsg}>改变属性值</button>
    

    三、完整DEMO示例

    import React   from  'react';
    import 'bootstrap/dist/css/bootstrap.min.css';
    //定义组件
    class MethodClick extends React.Component{
        constructor(props){
            super(props);
    
            //定义数据
            this.state={
                name:'张三',
                age:'23',
                address:'山东省青岛市市南区宁夏路288号软件园2号楼'
            }
    
            //第二种方式:在构造函数中改变this
            this.getAge=this.getAge.bind(this);
        }
    
        //第一种方式:onClick={this.getName.bind(this)
         getName(){
            alert(this.state.name);
        }
    
        //第二种方式:在构造函数中改变this
        getAge(){
            alert(this.state.age);
        }
    
        //第三种方式:使用箭头函数,使用频率最高
        getAddress=() =>{
            alert(this.state.address);
        }
    
        //改变属性值
        setMsg=() =>{
            this.setState({
                    name:'李四',
                    age:'35',
                    address:'青岛市李沧区书院路123号'
                }
            )
        }
    
        render() {
            return (
                <div>
                    <ul className="list-group">
                        <li className="list-group-item list-group-item-primary">姓名:{this.state.name}</li>
                        <li className="list-group-item list-group-item-success">姓龄:{this.state.age}</li>
                        <li className="list-group-item list-group-item-info">地址:{this.state.address}</li>
                    </ul>
                    <br/>
                    <br/>
                    <button type="button" className="btn btn-primary" onClick={this.getName.bind(this)}>获取当前姓名</button>
                    <br/>
                    <br/>
                    <button type="button" className="btn btn-success" onClick={this.getAge}>获取当前年龄</button>
                    <br/>
                    <br/>
                    <button type="button" className="btn btn-info" onClick={this.getAddress}>获取当前地址</button>
                    <br/>
                    <br/>
                    <button type="button" className="btn btn-primary" onClick={this.setMsg}>改变属性值</button>
                </div>
            )
        }
    
    }
    
    export  default  MethodClick;//导出组件
    

    相关文章

      网友评论

        本文标题:第4节 React事件 方法、 React定义方法的几种方式

        本文链接:https://www.haomeiwen.com/subject/fwgcaqtx.html