react中怎么传递事件对象

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

react中怎么传递事件对象

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

推荐:《javascript基础教程》

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

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

登录后复制

上述两种方式是等价的,分别通过 箭头函数 和 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 (            
                

hello

                {/* Pass params via bind() method. */}                Click            
        );    }}

登录后复制

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2720492.html

(0)
上一篇 2025年3月7日 22:37:05
下一篇 2025年3月1日 14:32:14

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • react中qs是什么

    react中qs是一个npm仓库所管理的包,一个增加了一些安全性的查询字符串解析和序列化字符串的库,可通过【npm install qs】命令进行安装。 本教程操作环境:windows7系统、React17版、thinkpad t480电脑…

    2025年3月7日
    200
  • react中图片如何引用

    react中图片引用的方法:1、导入图片路径,代码为【import Img from “./images/1.png”】;2、直接获取图片,代码为【】。 本教程操作环境:windows7系统、React17版、thi…

    2025年3月7日
    200
  • react设置文件路径别名的具体方法你知道么

    文章环境: “react”: “^16.13.1” 版本 学习视频分享:react视频教程 react官方脚手架默认是将webpack配置隐藏起来了,在进行配置之前需要将webpack给暴露出来。 1、输入命令 npm run eject …

    2025年3月7日 编程技术
    200
  • tomcat如何部署react项目

    tomcat部署react项目的方法:首先使用“npm run build”将项目打包;然后把打包后的文件夹中内容放到tomcat中webapps下的Root中;最后开启服务器访问“localhost:8080”端口即可。 本教程操作环境:…

    2025年3月7日
    200
  • react中支持fetch吗

    react中支持fetch,因为fetch在reactjs中等同于XMLHttpRequest,它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性。 推荐:《react视频教程》 react与fetch f…

    2025年3月7日 编程技术
    200
  • react中什么叫子组件

    在react中,将某段代码封装成一个组件,而这个组件又在另一个组件中引入,那么引入该封装的组件的文件叫做父组件,被引入的组件就叫做子组件。 本文操作环境:windows10系统、react16、thinkpad t480电脑。 推荐:《re…

    2025年3月7日
    200
  • react中JSX是什么

    react JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内部实现的;JSX为react.js开发的一套语法糖,也是react.js的使用基础。 本文操作环境…

    2025年3月7日
    200
  • 不用脚手架搭建react的方法

    不用脚手架搭建react的方法:首先使用npm init命令生成package.json文件;然后安装需要的依赖,并修改package.json文件的内容;接着安装babel;最后编写react组件即可。 本教程操作环境:windows7系…

    2025年3月7日
    200
  • 谷歌怎么调试react项目

    谷歌调试react项目的方法:首先使用Chrome打开需要调试的React页面,并打开“开发者工具”;然后点击“开发者工具”上方工具栏最右侧的react标签;最后查看各个组件之间的嵌套关系以及每个组件的事件、属性、状态等信息即可。 本教程操…

    2025年3月7日 编程技术
    200
  • 哪些公司用react

    用react的公司有:1、Facebook;2、Instagram;3、Netflix;4、纽约时报;5、雅虎;6、WhatsApp;7、Codecademy;8、Dropbox;9、Airbnb;10、Asana等等。 本文操作环境:wi…

    2025年3月7日
    200

发表回复

登录后才能评论