react事件中怎么传参？修改this指向？

目录

1、react事件中如何传递参数？

1、采用箭头函数 点击事件触发箭头函数将函数的执行结果返回出去

2、采用bind方法传递参数，bind方法不会自调用

2、react事件中如何修改this指向

解决方法：

1、在constructor中将事件的this重新绑定

2、写方法时使用箭头函数

3、在调用方法处用箭头函数包裹

4、在调用处将事件重新绑定this(原理其实和第一种类似，大差不差)

---

1、react事件中如何传递参数？

在react中，我们正常写事件处理程序：

import React from "react";
export default class extends React.Component{
    state={
        num : 11
    }
    add(){
        console.log(111)
    }

    render(){
        return (
            <>
                <div>{this.state.num}</div>
                <button onClick={this.add}></button>
            </>
        )
    }
}

在这个时候，如果我们想要传递一个参数过去，有两种方式：

1、采用箭头函数 点击事件触发箭头函数将函数的执行结果返回出去

<button onClick={()=>this.add(10)}></button>

2、采用bind方法传递参数，bind方法不会自调用

<button onClick={this.add.bind(this,10)}></button>

2、react事件中如何修改this指向

import React from "react";
export default class App extends React.Component{y
    state={
        num : 11
    }
    add(){
        console.log(this)
    }

    render(){
        return (
            <>
                <div>{this.state.num}</div>
                <button onClick={this.add}></button>
            </>
        )
    }
}

在上面的代码中，我们使用class类组件想要通过setState修改num的值,发现会报错，我们打印了一下this发现是undefined ,但正常情况下，我们的this应该指向我们的组件

原因：在react类组件中，方法内默认是严格模式，回调函数会失去它的上下文，变为全局的，因此this为undefined;

解决方法：

1、在constructor中将事件的this重新绑定

import React from "react";
export default class App extends React.Component{
    constructor(){
        super() //使用this需要调用super方法
        this.add = this.add.bind(this) //使用bind改变this指向
    }
    state={
        num : 11
    }
    add(){
        console.log(this)
    }

    render(){
        return (
            <>
                <div>{this.state.num}</div>
                <button onClick={this.add}></button>
            </>
        )
    }
}

2、写方法时使用箭头函数

import React from "react";
export default class App extends React.Component{
    state={
        num : 11
    }
    add=()=>{ //-------使用箭头函数
        console.log(this)
    }

    render(){
        return (
            <>
                <div>{this.state.num}</div>
                <button onClick={this.add}></button>
            </>
        )
    }
}

3、在调用方法处用箭头函数包裹

import React from "react";
export default class App extends React.Component{
    state={
        num : 11
    }
    add(){
        console.log(this)
    }

    render(){
        return (
            <>
                <div>{this.state.num}</div>
                <button onClick={()=>this.add()}></button>
            </>
        )
    }
}

4、在调用处将事件重新绑定this(原理其实和第一种类似，大差不差)

import React from "react";
export default class App extends React.Component{
    state={
        num : 11
    }
    add(){
        console.log(this)
    }

    render(){
        return (
            <>
                <div>{this.state.num}</div>
                <button onClick={this.add.bind(this)}></button>
            </>
        )
    }
}