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;

原文链接：https://blog.csdn.net/weixin_39893889/article/details/104696780

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。