svg react_React中的SVG陷阱
svg react
When we want to use SVG image in React, we may import it like this:
当我们想在React中使用SVG图像时,我们可以这样导入它:
import {ReactComponent as Logo} from "./logo.svg";
In my project, the logo.svg
is a X for user to click to delete the item in the list.
在我的项目中, logo.svg
是一个X,供用户单击以删除列表中的项目。
I added an onClick
function to it as below:
我向它添加了一个onClick
函数,如下所示:
const deleteItem = (e) => {const { item } = e.target.dataset;console.log(item)setList(list.filter((e) => e !== item));
};<Logodata-item={n}fill="#a3aab8"style={{ height: "1em", width:'auto', verticalAlign: "sub", marginLeft: "5px" }}onClick={deleteItem}
/>
When we click on the X, the item
is undefined
. Hence, we can not delete it correctly. However, when we click on the space outside X, but within that square area, it can retrieve the item correctly from the data-item.
当我们单击X时,该item
是undefined
。 因此,我们无法正确删除它。 但是,当我们单击X外部但在该正方形区域内的空间时,它可以从数据项中正确检索该项。
The crux of the issue is that we are using event.target
which is referencing the actual target that received the click. In this case, the <path>
tag. The data-item
is on<svg>
tag. Therefor, we cannot get the correct data.
问题的症结在于,我们正在使用event.target
,它引用的是收到点击的实际目标。 在这种情况下, <path>
标记。 data-item
位于<svg>
标记上。 因此,我们无法获得正确的数据。
It will only happen on SVG graphic as it is a vector graphic defined by a group of paths, boxes, circles, text etc. So, when we clicked on a SVG graphic, we may actually clicked on the paths, boxes, circles, text etc. but not the <svg>
itself.
它只会在SVG图形上发生,因为它是由一组路径,框,圆,文本等定义的矢量图形。因此,当我们单击SVG图形时,我们实际上可能单击了路径,框,圆,文本等等,但<svg>
本身不行。
解: (Solution:)
To solve it, we should use event.currentTarget
, which is always the object listening for the event. It always refers to the element to which the event handler has been attached(which is <svg>
tag in this case as we added the onClick
event handler to it).
为了解决这个问题,我们应该使用event.currentTarget
,它始终是侦听事件的对象。 它始终是指事件处理程序已附加到的元素(在本例中为<svg>
标记,因为我们向其中添加了onClick
事件处理程序)。
翻译自: https://medium.com/swlh/a-small-svg-pitfall-in-react-39cf09a3f66c
svg react
http://www.taodudu.cc/news/show-4231527.html
相关文章:
- React中的SVG陷阱
- 邱锡鹏 神经网络与深度学习课程【十六】——深度信念网络
- 神经网络与深度学习(邱锡鹏)
- 邱锡鹏《神经网络与深度学习》第一章 绪论
- 豆瓣评分9.4!跟邱锡鹏教授一起学「神经网络与深度学习」,7月19日开课
- 【邱锡鹏-神经网络与深度学习】第一章绪论 知识点汇总
- 复旦大学邱锡鹏教授:语言模型即服务,走向大模型的未来
- 复旦邱锡鹏:语言模型即服务,走向大模型的未来
- linux 多点触摸屏测试,c – Linux中的多点触控
- 电容式液晶屏可实现多点触控
- matebook14支持触摸屏吗_2020款的matebook14增加了多点触控屏是最大亮点
- qt多点触控
- Linux 驱动开发 六十六:多点触控(MT)协议
- android 电容屏多点触控协议
- lenovo thinkpad t460s opensuse linux 下禁用多点触控屏
- Android多点触控详解
- linux多点触摸屏驱动程序,Linux系统实现支持多点触控操作[视频]
- STM32模拟USB多点触控屏
- windows编程之WM_MENUSELECT消息
- 在Ubuntu-server下安装i3wm并简单配置
- archlinux+i3wm安装与配置
- mfc,WM_CTLCOLOR,WM_PAINT
- C#可以编辑的ListView
- 在i3wm中修改默认终端
- WM_CHAR,WM_UNICHAR,WM_IME_CHAR
- python tkinter.Text 高级用法 -- 设计功能齐全的文本编辑器
- manjaro i3wm社区版配置记录
- WM_INITDIALOG与WM_CREATE消息的区别
- SendMessage函数完全使用手册 (解读WM_)
- windows编程13-WM_CTLCOLORSTATIC
svg react_React中的SVG陷阱相关推荐
- Android png模拟svg,Android 中使用svg图片
1. svg认识 SVG:android5.0+出现,w3c推出 使用xml 描述二维图形语言,矢量图,放大缩小无影响 为什么用svg,现在手机的短板是内存,不是cpu,svg通过cpu计算,png占 ...
- android textview svg,Android中使用SVG与WebFont矢量图标
一.参考文献 二.html使用方法 1.下载字体 网上百度自己要使用的字体,一般下载的是ttf格式,需要4种(或5)格式,其他的格式可以通过在线工具基于ttf转换 web-fontmin(这个在线转换 ...
- React中的SVG陷阱
react svg When we want to use SVG image in React, we may import it like this: 当我们想在React中使用SVG图像时,我们 ...
- 【Android 安装包优化】Android 中使用 SVG 图片 ( Android 5.0 以下的矢量图方案 | 矢量图生成为 PNG 图片 )
文章目录 一.Android 5.0 以下的矢量图方案 二.矢量图生成为 PNG 图片 三.完整的 build.gradle 构建脚本 四.编译效果 五.参考资料 一.Android 5.0 以下的矢 ...
- 【Android 安装包优化】Android 中使用 SVG 图片 ( SVG 矢量图简介 | Android 中生成 Vector 矢量图资源 )
文章目录 一.SVG 矢量图简介 二.Android 中生成 Vector 矢量图资源 三.参考资料 一.SVG 矢量图简介 Android SVG 参考文档 : https://developer. ...
- php arcode svg,在react中使用svg的各种方法总结(附代码)
这篇文章给大家介绍的内容是关于在react中使用svg的各种方法总结(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 优势 SVG可被非常多的工具读取和修改(比如vscode ...
- 在vue3+vite+ ts 项目中使用svg
一:components下新建svgIcon.vue文件 <template> <svg :class="svgClass" v-bind="$attr ...
- 在react中使用svg的各种骚姿势
开头先抛个可供参考的项目ts-react-webpack4, 或脚手架steamer-react-ts 优势 SVG可被非常多的工具读取和修改(比如vscode) 不失真, 放大缩小图像都很清晰 SV ...
- android 使用动态的svg资源,在Android中使用SVG作为资源 – victor
victor 在Android中使用SVG作为资源. 使用这个插件,你可以为SVG定义源文件,它们将会自动在build中光栅化/导入,无需源代码. 安装 在build.gradle中添加: build ...
最新文章
- Java字符串拼接的五种方法,哪种性能最好?
- node(ActiveMq)
- 【剑指offer】矩形覆盖
- 系统级性能分析工具 — Perf
- mysql命令行如何建库_MySQL心得2--命令行方式建库和表
- 一种简单、实用的测量程序运行时间的方法
- 【BZOJ3524】Couriers,第一次的主席树
- I/O重定向的原理和实现
- IDEA 这个小技巧太实用了。。
- 获取一个类的信息(仿YYClassInfo类)
- 推荐8款Windows装机必备下载神器【建议收藏】
- r中gglot怎么组合多张图_怎样组合多张ggplot2图片
- java中row类,Flink数据类型之POJO和Table中的Row
- 任务管理系统算法-Kahn’s algorithm for Topological Sorting(一)
- Kafka消费者原理解析
- 03-面向对象之面向对象基础
- JS作业第四周:JS中fun和fun()区别
- oracle olap创建物化视图,CUUG oracle物化视图讲解
- 获取某一个<tr>中<td>的值
- 解决 IIS Worker Process 内存占用达到99%的问题