• 技术文章 >web前端 >js教程

    react如何写点击事件

    coldplay.xixicoldplay.xixi2020-11-19 11:00:24原创37

    react写点击事件的方法:1、使用bind绑定,代码为【this.clicked.bind(this,"hello world")】;2、使用箭头函数,代码为【onClick={(event)=>this.clicked("hello】。

    react写点击事件的方法:

    1、bind绑定

    第一个参数指向this,第二个参数开始才是事件函数接收到的参数,事件对象event默认是最后一个参数。

    ...
    clicked(param,event){
        console.log(param) //hello world
        console.log(event.target.value) //按钮
    }
    render(){
        return (
            <React.Fragment>
                <button value="按钮" onClick={this.clicked.bind(this,"hello world")}>点击</button>
            </React.Fragment>
        )
    }
    ...

    这里的话绑定this可以统一写,这样代码看起来整洁点。

    ...
    constructor(props){
        super(props);
        this.state = {};
        this.checkMenu = this.checkMenu.bind(this);
    }
    clicked = (param)=>{
        return (event)=>{
            console.log(event.target.value); // 按钮
            console.log(param); // hello
        }
    }
    render(){
        return (
            <React.Fragment>
                <button value="按钮" onClick={this.clicked('hello')}>点击</button>
            </React.Fragment>
        )
    }
    ...

    2、箭头函数

    箭头函数若要传事件对象event的话,需要在箭头函数中把event作为参数传递给触发的事件。

    ...
    clicked(param,event){
        console.log(param) //hello world
        console.log(event.target.value) //按钮
    }
    render(){
        return (
            <React.Fragment>
                <button value="按钮" onClick={(event)=>this.clicked("hello world",event)}>点击</button>
            </React.Fragment>
        )
    }
    ...

    相关免费学习推荐:JavaScript(视频)

    以上就是react如何写点击事件的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:react 点击事件
    上一篇:jquery有克隆方法吗? 下一篇:如何判断一个对象是否为jquery对象
    第14期线上培训班

    相关文章推荐

    • 深入理解JavaScript中按钮点击事件的处理方法• 图文详解jQuery按钮点击事件的三种方法• css如何禁止元素的点击事件• layui实现点击事件的方法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网