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

    react中怎么传递事件对象

    藏色散人藏色散人2021-01-13 19:00:34原创101

    react中传递事件对象的方法:1、使用“{(e) => this.deleteRow(id, e)}”方式传递;2、通过“{this.deleteRow.bind(this, id)}”方式传递。

    本教程操作环境:windows7系统、react17.0.1版本,Dell G3电脑。

    推荐:《javascript基础教程

    向事件处理程序传递参数(事件对象)

    给函数传递额外参数:以下两种方式

    <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
    <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

    上述两种方式是等价的,分别通过 箭头函数 和 Function.prototype.bind 来实现。

    上面两个例子中,参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式,事件对象必须显式的进行传递,但是通过 bind 的方式,事件对象以及更多的参数将会被隐式的进行传递。

    值得注意的是,通过 bind 方式向监听函数传参,在类组件中定义的监听函数,事件对象 e 要排在所传递参数的后面,例如:

    class Popper extends React.Component{
        constructor(){
            super();
            this.state = {name:'Hello world!'};
        }
        
        preventPop(name, e){    //事件对象e要放在最后
            e.preventDefault();
            alert(name);
        }
        
        render(){
            return (
                <div>
                    <p>hello</p>
                    {/* Pass params via bind() method. */}
                    <a href="https://reactjs.org" onClick={
                    this.preventPop.bind(this,this.state.name)
                    }>Click</a>
                </div>
            );
        }
    }

    更多编程相关知识,请访问:编程学习!!

    以上就是react中怎么传递事件对象的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:react
    上一篇:jquery 判断元素是否可见的实现方法 下一篇:介绍JavaScript 内存管理+如何处理4个常见的内存泄漏
    第14期线上培训班

    相关文章推荐

    • react开发框架有哪些?• 谷歌怎么安装react插件• react怎么mock数据• vue和react状态管理有啥区别?

    全部评论我要评论

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

    PHP中文网