nextjs13 中点击传 dom 给函数写法

最新推荐文章于 2024-02-04 10:28:30 发布

lllomh

最新推荐文章于 2024-02-04 10:28:30 发布

阅读量280

点赞数

分类专栏：我的碎屑世界 # SSR 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/lllomh/article/details/133910726

版权

我的碎屑世界同时被 2 个专栏收录

71 篇文章 1 订阅

订阅专栏

SSR

21 篇文章 1 订阅

订阅专栏

文章讲述了在Next.js13中，通过onClick事件处理函数时，应使用event.currentTarget获取当前触发元素，而非直接使用target，以确保传递的是实际DOM元素，适用于处理复杂的DOM结构。

摘要由CSDN通过智能技术生成

nextjs13 中点击传 dom 给函数写法

传当前的元素重点是 currentTarget. 如果直接使用 target 会传当前元素里面的元素

<div className="headerTrigger">

<span className="trigger" onClick={(event) => f_nav(event.currentTarget)}>

<span></span>

<span></span>

<span></span>

</span>

</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lllomh

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nextjs13 中点击传 dom 给函数写法

传当前的元素重点是 currentTarget. 如果直接使用 target 会传当前元素里面的元素。nextjs13 中点击传 dom 给函数写法。
复制链接

扫一扫

专栏目录

redux、scss/less、antd按需加载、typescript整合nextjs

mackJun的博客

08-16

1944

nextjs整合redux、typescript、antd按需加载案例步骤:(如有侵权，可以留言，

从零搭建一个基于React+Nextjs的SSR网站(二)：在Nextjs项目中增加react+redux

个人前端记录

01-07

3407

具体搭建流程可以参考这篇文章，写得很好也非常详细：用Next.js快速上手React服务器渲染，我就不转载过来了。看完后你会搭建一个自己的本地的静态站点，这个时候我们就可以向这个项目上面添加React和Redux了。与往常的react+redux项目不同的是，以往的react的组件是用Provider容器包裹起来的，可以让容器组件拿到state，比如下面这样 ... import { Pro...

参与评论您还未登录，请先登录后发表或查看评论

next.js组件传值，加载按钮

小码的博客

02-18

1430

import Icon from '../icon'; import styles from '../../styles/ui/button.module.css'; // import 'aCss/ui/button.css'; function button(props) { const {type,children,className}=props if(type==undefined){ type=0 } return ( <&.

Nextjs中文文档

大灰狼的小绵羊哥哥的博客

10-28

2457

Next.js 是一个轻量级的 React 服务端渲染应用框架。 Next.js中文站点 http://nextjs.frontendx.cn Next.js中文站Github https://github.com/raoenhui/next-site-cn 当前翻译版本为 7.0.0-canary.8。怎么使用安装代码自动分割 CSS 支持嵌入样式 ...

Nextjs中文文档 + scss nextjs配置

飞翔的熊blabla

07-29

3942

三篇短文让你学会 NextJS（一）

qianduangougou的博客

12-18

752

NextJS 是一个用于生产环境的 React 框架，它可以提供生产环境所需的所有功能，开发体验极佳。它提供的功能包括静态及服务器端融合渲染、支持 TypeScript、智能化打包、路由预取等，无需任何配置。也许你现在还没用到服务端渲染，当你需要的时候，不妨看看这篇文章。基本介绍谈到 NextJS，使用过的程序员无不为它点赞。对它的优点，官方总结如下：直观的、基于页面的路由系统（并支持动态路由）预渲染。支持在页面级的静态生成 (SSG) 和服务器端渲染 (SSR) 自动代码拆

react函数式组件（hook）

weixin_49720804的博客

07-29

2531

（ hook ）react函数式组件的基础入门学习

next.js + react基础（持续更新）

最新发布

weixin_56478633的博客

02-04

1448

一个组件就是用户界面的一部分，拥有自己的逻辑和外观，组件之间可以互相嵌套，也可以多次复用【自定义组件首字母要大写，否则不起作用】/* 页面是路由独有的 UI。您可以通过从 page.js 文件导出组件来定义页面。使用嵌套文件夹定义路由，并使用 page.js 文件使路由可公开访问。*/// 绑定事件报错，添加使用客户端use client【允许在客户端（浏览器中）渲染 React 组件】// 引入css// 引入useState// 自定义组件首字母要大写，否则不起作用return (

mobx中跟新了数据视图没变化_vue视图不更新情况

weixin_39699313的博客

11-20

532

我们有时会会在处理vue项目的时候，遇到数据变化了，但是视图并没有实时渲染的情况vue视图为什么不渲染页面的原因当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shi...

JavaScript中点击事件的写法

10-22

本篇文章将深入探讨JavaScript中三种常见的点击事件写法，以及如何通过JavaScript模拟触发按钮点击事件。 ### 1. 内联事件处理这是最基础的事件处理方式，直接在HTML元素中通过`onclick`属性指定一个函数或语句块...

Vue Render函数创建DOM节点代码实例

10-15

在Vue中，`render` 函数接收一个参数 `createElement`，这个函数是用于创建虚拟DOM节点的。在上述代码实例中，我们可以看到如何使用 `createElement` 创建DOM元素： 1. **属性传递**：`createElement` 接受一个标签...

DOM节点深度克隆函数cloneNode()用法实例

09-03

这个副本可以是浅复制或深复制，这取决于传递给`cloneNode()`函数的参数。如果参数为`true`，则执行深度复制，复制节点及其所有子节点；如果参数为`false`，则执行浅复制，仅复制节点本身，不包括子节点。在给定的...

DOM节点删除函数removeChild()用法实例

12-30

`removeChild()`是DOM中一个关键的节点操作函数，用于从DOM树中移除指定的子节点。在这个实例中，我们将深入探讨`removeChild()`的用法，并通过具体的代码示例来理解其工作原理。 `removeChild()`函数的基本语法是...

解决vue vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: “TypeError: Cannot convert undefine

热门推荐

lllomh的博客

03-03

1万+

报错这是因为数据还没到先显示了,图标是表单的时候设置有值之后再显示就好了 value="barData?barData:''" 这样也会报错的只有 v-if 可以

crontab -e 定时任务运行命令方法(亲测有用)

lllomh的博客

03-15

1万+

1. 新建一个 .sh文件 vim start.sh #!/bin/bash source /etc/profile PATH=/usr/local/bin:$PATH pm2 restart 0 如果有多个命令就直接后面换行追加 2.运行pwd 获取到路径等下要用 /home/start.sh 3. 执行 crontab -e 进入编辑 */10 * * * * /home/start.sh 10分钟执行一次该文件, 里面的命令也会跟着执行. 亲测本文根

nuxt 报Though the “loose“ option was set to “false“ in your @babel/preset-env config, it will not(解决)

lllomh的博客

05-08

6918

nuxt 执行报错 : WARN Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/ plugin-proposal-class-properties. ..

小程序开发中cookie的使用场景以及方案

lllomh的博客

04-12

5364

总结而言，小程序中的 cookie 可以在一些简单的场景下用于存储和传递数据，但应当注意数据的安全性、容量限制、同源策略和用户隐私权。敏感信息，例如用户的密码、支付信息等，不应当存储在 cookie 中，而应当使用更加安全的方式，例如使用 HTTPS 协议进行数据传输，使用服务器端存储和验证用户信息。在小程序开发中，使用 cookie 是一种常见的方式来在客户端和服务器之间传递和存储数据。小程序中的 cookie 可能受到用户的隐私设置限制，例如用户禁用了 cookie 或限制了 cookie 的使用。

[已解决]CopyWebpackPlugin报错TypeError: compilation.fileDependencies.push is not a function

lllomh的博客

11-23

5331

weboack 遇到这问题,网上目前还没有答案CopyWebpackPlugin报错CopyWebpackPlugin TypeError: compilation.fileDependencies.push is not a function demo 请狠狠的点这里https://download.lllomh.com/cliect/#/product/JB23148366892270 找到包文件注销就可以了 "copy-webpack-plugin": "^4.0.1", ..

DOM4J：中文教程与性能优势详解

根据IBM developer社区的文章，Dom4j在性能测试中表现优异，特别是在多项基准测试中名列前茅，这使得它成为项目选择中的首选。与其他解析器如JDOM相比，Dom4j的特点在于其丰富的接口，这种灵活性使得开发者可以根据...