react合成事件的三种绑定方式bind

最新推荐文章于 2025-11-06 09:49:20 发布

原创最新推荐文章于 2025-11-06 09:49:20 发布 · 7.7k 阅读

4 ·

CC 4.0 BY-SA版权

React语法专栏收录该内容

9 篇文章

订阅专栏

本文介绍了JavaScript中处理this指向问题的方法，包括使用bind方法绑定事件处理器内的this，构造器内声明绑定，以及使用箭头函数自动绑定this。这些技巧有助于开发者在使用ES6 classes或纯函数时正确处理this指向。

在使用ES6 classes或者纯函数时，不存在自动绑定，需要我们手动实现this的绑定。

一 bind方法。这个方法可以绑定事件处理器内的this，并可以向事件处理器中传递参数，例：

class App extends Component{
    handleClick(e,arg){
        console.log(e,arg);
    }
    render(){
        return<button onClick={this.handleClick.bind(this,'test')}>Test</button>;
    }
}

若不传参即可写为

this.handleClick.bind(this)

另外stage 0草案中提供了一个便捷的方案——双冒号语法，例：

<button onClick={::this.handleClick}>Test</button>

二构造器内声明，优点为仅需要进行一次绑定，不需要每次调用时去执行绑定。

class App extends Component{
    constructor(props){
        super(props);
        this.handleClick=this.handleClick.bind(this)
    }
    handleClick(){
        console.log("ok")
    }
    render(){
        return(
            <button onClick={this.handleClick}>按钮</button>
        )
    }
}

三箭头函数，自动绑定了定义此函数作用域的this。

class App extends Component{
    const handleClick=(e)=>{
        console.log(e);
    }
    render(){
        return<button onClick={this.handleClick}>Test</button>;
    }
}

或

class App extends Component{
    handleClick(e){
        console.log(e);
    }
    render(){
        return<button onClick={()=>this.handleClick()}>Test</button>;
    }
}