[JavaScript知识库]react中this的指向问题

export class Shijian extends React.Component {
    constructor() {
        super(); //es6里面规定的，构造函数里必须这个super函数
        this.state = {
            count: 10
        }
    }
    render() {
        return (<div>
            <h1>计数器:{this.state.count}</h1>
            <button onClick={()=> {
                this.setState({count: this.state.count + 1})
            }}>按钮</button>
        </div>)
    }
};

• JSX 中掺杂过多 JS 逻辑代码，会显得非常混乱
• 推荐：将逻辑抽离到单独的方法中，保证JSX 结构清晰

方法

1、
箭头函数里面的this并不是自己决定的，而是由外部环境决定的，外部环境中this是谁箭头函数里面的this就是谁

• 利用箭头函数自身不绑定this的特点
• render() 方法中的 this 为组件实例，可以获取到setState()

class Hello extends React.Component {
onIncrement() {
this.setState({ … })
}
render() {
// 箭头函数中的this指向外部环境，此处为：render()方法
return (
<button onClick={() => this.onIncrement()}></button>
)
}
}

2、

• bind方法

export class Shijian extends React.Component {
    constructor() {
        super(); //es6里面规定的，构造函数里必须这个super函数
        this.state = {
            count: 10
        }
    };
    handleCount() {
        this.setState({count: this.state.count + 1})
    };
    render() {
        return (<div>
            <h1>计数器:{this.state.count}</h1>
            <button onClick={this.handleCount.bind(this)}>按钮</button>
        </div>)
    }
};

• 利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起
• constructor中的this也是指向实例的

class Hello extends React.Component {
constructor() {
super()
 this.state = {
            count: 10
        };
this.onIncrement = this.onIncrement.bind(this);
}
onIncrement() {
this.setState({ … })
}
render() {
return (
<button onClick={this.onIncrement}></button>
)
}

export class Shijian extends React.Component {
    constructor() {
        super(); //es6里面规定的，构造函数里必须这个super函数
        this.state = {
            count: 10
        };
        this.handleCount = this.handleCount.bind(this)
    };
    handleCount() {
        this.setState({count: this.state.count + 1})
    };
    render() {
        return (<div>
            <h1>计数器:{this.state.count}</h1>
            {/* <button onClick={this.handleCount.bind(this)}>按钮</button> */}
            <button onClick={this.handleCount}>按钮</button>
        </div>)
    }
};

3、class 的实例方法

• 利用箭头函数形式的class实例方法
• 注意：该语法是实验性语法，但是，由于babel的存在可以直接使用

绝对可以用呀，直接就指向的是实例的this

class Hello extends React.Component {
onIncrement = () => {
this.setState({ … })
}
render() {
return (
<button onClick={this.onIncrement}></button>
)
}
}

export class Shijian extends React.Component {
    constructor() {
        super(); //es6里面规定的，构造函数里必须这个super函数
        this.state = {
            count: 10
        };
        
    };
    handleCount = () => {
        this.setState({count: this.state.count + 1});
    }
    render() {
        return (<div>
            <h1>计数器:{this.state.count}</h1>
            {/* <button onClick={this.handleCount.bind(this)}>按钮</button> */}
            <button onClick={this.handleCount}>按钮</button>
        </div>)
    }
};

推荐使用方法三