React 入门学习笔记整理(四)—— 事件

1、事件定义

React事件绑定属性的命名采用驼峰式写法,而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)

在类组件中定义函数,通过this.函数名去调用

class GreateH extends React.Component{
    static defaultProps = {name:'CoCo'};
    handler(){
        console.log("click");
    }
    render(){
        return <div>
            <h2 onClick={this.handler}>hello,{this.props.name}</h2>
        </div>
    }
}

2、this指向

按照第一步中的写法,在handler函数中打印出当前的this:

此时this不指向实例,类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handler 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。

1)使用bind函数改变this指向

class GreateH extends React.Component{
    static defaultProps = {name:'CoCo'};
    //在类里直接写成箭头函数
    handler(){
        console.log("click");
        console.log(this);
    };
    render(){
        return <div>
            <h2 onClick={this.handler.bind(this)}>hello,{this.props.name}</h2>
        </div>
    }
}

但是这种render渲染时每次会重新绑定,所以可以写成以下这种:

class GreateH extends React.Component{
    constructor(props){
        super(props);
        //初始化时改变this的指向,给实例添加一个方法,this.handler.bind(this)会返回一个新的函数
        this.handler = this.handler.bind(this);
    }
    static defaultProps = {name:'CoCo'};
    handler(){
        console.log("click");
        console.log(this);
    };
    render(){
        return <div>
            <h2 onClick={this.handler}>hello,{this.props.name}</h2>
        </div>
    }
}

2)写在类中的函数直接写成箭头函数

class GreateH extends React.Component{
    static defaultProps = {name:'CoCo'};
    //在类里直接写成箭头函数
    handler = () => {
        console.log("click");
        console.log(this);
    };
    render(){
        return <div>
            <h2 onClick={this.handler}>hello,{this.props.name}</h2>
        </div>
    }
}

this在控制台打印出来:

3)这里还有一种写法,回调函数中使用 箭头函数:

class GreateH extends React.Component{
    static defaultProps = {name:'CoCo'};
    //在类里直接写成箭头函数
    handler (){
        console.log("click");
        console.log(this);
    };
    render(){
        return <div>
            <h2 onClick={(e)=>this.handler(e)}>hello,{this.props.name}</h2>
        </div>
    }
}

并不推荐第三种写法,因为每次在GreateH 组件渲染的时候,都会创建一个不同的回调函数,。在大多数情况下,这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件,这些组件可能会进行额外的重新渲染,为了避免性能问题,推荐使用上面两种方式。

3、事件传参

posted @ 2018-12-19 14:32  清风明月小虾米  阅读(362)  评论(0编辑  收藏  举报