【React】react学习笔记12-记录箭头函数的传值方法

最新推荐文章于 2023-01-15 17:20:40 发布

原创最新推荐文章于 2023-01-15 17:20:40 发布 · 539 阅读

0 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

18 篇文章

订阅专栏

本文探讨了在React组件中使用箭头函数的方法及其优势，通过实例展示了如何在按钮点击事件中使用箭头函数和bind方法来传递参数，提高了代码的可读性和维护性。

import React,{Component} from 'react';

export default class Main  extends Component{
    constructor(props){
        super(props);
        this.state={
            num:0
        }
    }
    // 在回调函数中使用箭头函数，可添加参数
    getName(name){
        console.log(name);
    }
    getName2=(name)=>{
        console.log(name);
    }
 
    render() {
        let val = 'YY';
        let test = 'XX';

        return (
            <div>
                <button onClick={this.getName.bind(this,test) }>getName</button>

                <button onClick={
                    () => {
                        this.getName2(test)
                    }
                }>getName2</button>

            </div>
        )
    }

}