react中this的使用方法总结

react中this的使用方法总结

this的绑定

1. 通过this.事件名称.bind(this)进行this绑定。
2. 通过箭头函数进行this绑定。

react中遇到循环时this的绑定方法

1. 通过赋值的方式进行绑定：var _this = this;。
2. 通过this.事件名称.bind(this)进行this绑定。
3. 通过在map函数的第二个参数将this传入进行绑定。

react中遇到循环时this的绑定方法

1. 通过this.事件名称.bind(this,参数1,参数2,参数3)进行参数传递。
2. 通过箭头函数进行参数传递。

代码展示如下：

import React, { Component } from 'react';
class ThisComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list:["活着", "飘", "哈佛凌晨4点半"]
        }
        this.FuncOne= this.FuncOne.bind(this)
    }
    FuncOne(){
        alert("this的第一种绑定方法")
    }
    FuncTwo(){
        alert("this的第二种绑定方法")
    }
    FuncThree=()=>{
        alert("this的第三种绑定方法")
    }
    FuncFoure(){
        alert("this的第四种绑定方法")
    }
    changMes(value1,value2){
        alert("changMes")
        alert(value1)
        alert(value2)
    }
    changMesTwo(value){
        alert("changMesTwo")
        alert(value)
    }
    changMesThree=(value)=>{
        alert("changMesThree")
        alert(value)
    }
    LiClick1=(e)=>{
        alert(e.target.textContent)
    }
    LiClick2=(e)=>{
        alert(e.target.textContent)
    }
    LiClick3=(e)=>{
        alert(e.target.textContent)
    }
    LiClick4=(e,value)=>{
        alert(e.target.textContent)
        alert(value)
    }
    render() {
        const {list} = this.state;
        var _this = this;
        return (
            <div>
                <h3>this 的绑定方法</h3>
                {/* 全局的this绑定，在以后的函数调用中不需要多次进行绑定（一次绑定，多次使用），绑定后this的上下文都是ThisComponent组件实例对象 */}
                <button onClick={this.FuncOne}>this的第一种绑定方法</button><hr/>
                {/* 局部的this绑定，需要我们每次使用bind()函数绑定到组件对象上。 */}
                <button onClick={this.FuncTwo.bind(this)}>this的第二种绑定方法</button><hr/>
                {/* es6中新加入了箭头函数=>，箭头函数除了方便之外还将函数的this绑定到其定义时所在的上下文。 箭头函数没有自己的this指针会继承外层的作用域*/}
                <button onClick={this.FuncThree}>this的第三种绑定方法</button><hr/>
                <button onClick={()=>this.FuncFoure()}>this的第四种绑定方法</button><hr/>


                <h3>react中遇到循环时this的绑定方法</h3>
                <p>第一种方法：var _this = this;</p>
                <ul>
                    {list&&list.length>0&&list.map((item,index)=>{
                        return(
                            <li key={index} onClick={_this.LiClick1}>{item}</li>
                        )
                    })}
                </ul><hr/>
                <p>第二种方法：this.LiClick1.bind(this)</p>
                <ul>
                    {list&&list.length>0&&list.map((item,index)=>{
                        return(
                            <li key={index} onClick={this.LiClick2.bind(this)}>{item}</li>
                        )
                    })}
                </ul><hr/>
                <p>第三种方法：在map函数的第二个参数将this传入</p>
                <ul>
                    {list&&list.length>0&&list.map((item,index)=>{
                        return(
                            <li key={index} onClick={this.LiClick3}>{item}</li>
                        )
                    },this)}
                </ul><hr/>


                <h3>react中的时间传参方式</h3>
                {/* 通过 bind 方法来绑定参数，第一个参数指向 this,第二个参数开始才是事件函数接收到的参数 */}
                <button onClick={this.changMes.bind(this,"我是值1","我是值2")}>执行方法进行传值1</button><hr/>
                <button onClick={() => { this.changMesTwo("我是changMesTwo值1")}}>执行方法进行传值2</button><hr/>
                <button onClick={() => { this.changMesThree("我是changMesThree值1")}}>执行方法进行传值3</button><hr/>

                
                <h3>react中循环时事件的传值</h3>
                <ul>
                    {list&&list.length>0&&list.map((item,index)=>{
                        return(
                            <li key={index} onClick={(e)=>{_this.LiClick4(e,"我是LiClick4值1")}}>{item}</li>
                        )
                    })}
                </ul><hr/>
            </div>
        );
    }
}

export default ThisComponent;