javascript - reactjs中的bind问题

问题描述

问 题

import React,{Component} from 'react';

class Search extends Component{
    constructor(props){
        super(props);
        this.state = {name:''};
    }

    handleSearch(){
        console.log(this); // null
        console.log(this.state.name);// 报错
    }

    render(){
        return (
            <div>
                <input type="text" value={this.state.value}/>
                <button onClick={this.handleSearch}>搜搜</button>
            </div>
        );
    }
}

请问代码中的打印log那里的this为什么是null?handleSearch是button中调用的，怎么也不可能是null啊？应该是button这个dom吧。

另外，在页面中直接这样写：

var handleClick =  function (event) {
    console.log(this);    // 不是null是<div id="foo"></div>
}
document.getElementById('foo').addEventListener('click', handleClick);
document.getElementById('foo').click();

我知道怎么解决。我只想知道react中this为什么不是dom而是null??

解决方案

更新

原来楼主问的是为什么this是null,而不是DOM或者window之类的东西。。。嗯，我也很好奇，所以我查了一下源码，跳来跳去好晕。。。

先说一下，按照你的写法，在development环境下，是null。在production环境下，是undefined。

简单的说一下原因：

1. babel编译出来的代码都会添加"use strict"，变成严格模式。而你知道，如果使用严格模式，而没有手动绑定this的话，那么this不是window，而是undefined。而如果使用bind(null)的话，this就是null。

2. 然后，由于react使用的是事件代理，并不是原生的事件，所以他的调用方法并不会像原生那样绑定对象的DOM。

3. 最后，经过源码的观察来看，事件的callback在存入的时候，并没有做任何绑定。在调用的时候，在production下，没有做什么绑定。而在development下，绑定了null。（或者这么说不准确，事件的回调在添加的时候，使用proxyMethod做了一层封装，而在里面是用了apply(this, arguments)来调用原来的回调函数。而在production下，没有对proxyMethod做什么绑定，所以上面apply时候的this是undefined。而在development下，绑定了null，所以上面的this是null）

不知道你明白没。。。

原答案

四种解决方法，任何一种都可以解决

• 像@hyy1115那样在constructor里面绑定一下

• 在<button onClick={this.handleSearch.bind(this)}>搜搜</button>绑定

• 这个样子调用：<button onClick={()=>{ this.handleSearch()}}>搜搜</button>

• 使用箭头函数可以解决这个问题

  handleSearch = ()=>{
        console.log(this); // null
        console.log(this.state.name);// 报错
    }

这篇关于javascript - reactjs中的bind问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！