React:如何在dangerouslySetInnerHTML的img标签上添加onClick()
React是一个用于构建用户界面的JavaScript库。它通过组件化的方式，使得开发者可以将界面拆分成独立的、可复用的部分，从而提高代码的可维护性和可重用性。
在React中，使用dangerouslySetInnerHTML属性可以将HTML代码作为字符串插入到组件中。如果想在dangerouslySetInnerHTML的img标签上添加onClick()事件，可以通过以下步骤实现：
- 首先，确保你已经安装了React库，并在组件文件中引入React：import React from 'react';
- 创建一个React组件，并在组件的
render方法中使用dangerouslySetInnerHTML属性插入HTML代码：class MyComponent extends React.Component { render() { const htmlCode = '<img src="image.jpg" onClick={this.handleClick} />'; return <div dangerouslySetInnerHTML={{ __html: htmlCode }} />; } handleClick() { // 处理点击事件的逻辑 } } - 在组件中定义
handleClick方法，用于处理点击事件的逻辑。
这样，当用户点击img标签时，React会调用handleClick方法来处理点击事件。
需要注意的是，使用dangerouslySetInnerHTML属性插入HTML代码存在安全风险，因为它可以导致跨站脚本攻击（XSS）。在实际开发中，应该谨慎使用，并确保插入的HTML代码是可信的。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云函数（SCF）：https://cloud.tencent.com/product/scf
- 云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cmysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（TBaaS）：https://cloud.tencent.com/product/tbaas
- 腾讯云物联网平台（TIoT）：https://cloud.tencent.com/product/tiot
- 移动推送（TPNS）：https://cloud.tencent.com/product/tpns
相关·内容
我想添加一个通过dangerouslySetInnerHTML显示的html字符串的<img>上的onClick()。(/<img/g, '<img id="content_img" onClick={this.onClickBlowUpImage.bind(this)}')
return (<div
浏览 8提问于2017-07-18得票数 6
2回答
我正在构建一个琐碎的应用程序。最初，我只是实现了纯文本问答琐事，但现在我也想添加图片与问题。我正在从本地JSON服务器获取数据。最后，我还共享了我的JSON对象的一条记录。这里是我的API调用，请帮助我如何检索图像到我的组件。这是代码。我已经包含了db.json文件供参考，但实际上，我有一个JSON服务器。};type Props = { answers: string[];
callbac
浏览 8提问于2022-04-06得票数 0
我试图将从服务器发送的html设置为使用React中的dangerouslySetInnerHTML属性显示在div中。我还在它里面有脚本标记，并使用在html中定义的函数。'ipt>alert("this.is.sparta");function pClicked() {console.log("p is clicked");}</scr'+'ipt><body><p onClic
浏览 6提问于2016-02-24得票数 40
回答已采纳
2回答
inst = M.Carousel.init(small, {}); </script> render(){
ret
浏览 26提问于2020-07-08得票数 2
回答已采纳
我试图在react组件中设置一个切换状态，但是每次单击标题时，页面都会向上滚动。我尝试将e.preventDefault添加到onClick函数中，但它什么也不做。我很确定这是由jsx元素的dangerouslySetInnerHTML部分引起的。
是否有防止这种行为的方法，或者更好的方法来做到这一点？<\/p>\n<p><img class=\"alignnone size-full
浏览 3提问于2015-07-28得票数 0
回答已采纳
我问过关于dangerouslySetInnerHTML的问题，当html来自我的api或者没有区别的时候使用它是危险的吗？谢谢
浏览 21提问于2022-09-02得票数 -1
我有这个动态创建的元素，是通过第三方库(jsondiffpatch.formatters.html.format())创建的。 在添加到文档DOM之前，我想对它做一些css和内容更改。const deltaHtml = jsondiffpatch.formatters.html.format(delta); <div dangerouslySetInnerHTML] = React.useState<any>(null);
浏览 30提问于2020-07-02得票数 0
我不明白如何在文本区域中使用dangerouslySetInnerHTML的值，所以当你添加表情符号时，你会在预览中看到它们的渲染吗？<script src="//cdn.jsdelivr.net/emojione/1.5.0/lib/js/emojione.min.js"></script>
<link rel="st
浏览 0提问于2015-10-28得票数 2
4回答
我使用React和Redux构建了一个小型博客应用程序。博客显示帖子页面，其中包含帖子的标题、作者、标签和描述。当单击标题或“阅读更多”按钮时，我希望从本地项目的数据文件夹中加载并呈现包含所有帖子的相应帖子的HTML文件。Redux正在管理博客的状态，用8个不同的帖子加载初始posts.json文件，包括数据文件夹中相应html文件的htmlPath。
浏览 1提问于2016-10-18得票数 40
src='\\data\\img\\$1.png' height='20px'/>");
<img src='./data/img/1.png' height='20px'/><img src='./data/img/G.png'
浏览 3提问于2016-01-19得票数 0
回答已采纳
4回答
我已经成功地使用HTML完成了一个简单的小部件，现在我尝试这个小部件来响应单击事件，所以我考虑从HTML添加onclick=method()方法，或者从React添加onClick={method}方法编辑在尝试
浏览 1提问于2018-05-18得票数 16
回答已采纳
7回答
我有- img id=" logo“，所以我可以在我的网站上有我的logo，完整的代码是：如何使用<a我尝试了许多不同的方法，但都不起作用:/
浏览 1提问于2013-06-13得票数 5
2回答
我有一组小的图像堆放在一边，更大的版本在右边。当我点击小图片时，我想要改变大图像，但问题是我可以使用普通的JavaScript实现这一点，但是我无法在reactjs中做到这一点。src="https://i.ibb.co/5LdMxNp/image.jpg" alt="image" onclick="clickimg(this)">
<img src="h
浏览 8提问于2022-11-21得票数 1
我正在使用React创建博客的过程中。我计划从服务器端带来博客的主要内容，并通过道具/状态将其传递给React组件。博客内容可以有html标记，如：
为所有ht
浏览 1提问于2016-07-21得票数 2
回答已采纳
2回答
对问题的解释：我正在使用Axios来获取状态内的数据( Pokémon 's)，但是，所有东西都呈现在一个组件中(创建数组和列表并显示列表)，而我需要从中获得的每一个精灵都在他自己的组件中(这样我就可以为每个(使用react ts、node.js和axios)import axios from 'axios;
export
浏览 3提问于2022-06-15得票数 0
回答已采纳
1回答
我正在构建MERN项目，在react部分我得到了： - components/ - admin-page.html所以问题就在App.js里import React from 'react';
import { Br
浏览 2提问于2020-12-20得票数 2
使用像这样的React组件class Test extends React.Component { <因此，最终的渲染结果类似于 <div class="testtest"> <li>1</li></ul>
浏览 2提问于2019-04-26得票数 0
由于一些奇怪的原因，onClick不工作在我的反应应用程序。<GorillaSurfIn console.log('gorilla clicked');setShouldGorillaSurfOut(true); />
正如您所看到的，我console.logged它，但我没有看到在控制台任何
浏览 8提问于2020-10-02得票数 0
回答已采纳
maxBarThickness: 10, categoryPercentage: 0.5],}, xAxes: [ } yAxes: [ ]tooltips: {},
<em
浏览 38提问于2021-01-21得票数 1
当在浏览器上呈现ref回调时，我使用React获取元素，然后转换它，以防子元素超过父元素，而不是由React解析内容，而是通过API调用，因此解析必须手动进行。注释--目前我正在通过react回调获得元素，并试图通过普通Js修改它，如果react组件发生了重新呈现(如果是，我们如何在React中这样做)，或者如果我们使用普通JS修改DOM，它会产生效果吗？
在加载图像时，使用简单的JS，我无法动态地为图像>父级宽度创建节点。我已经能够捕获宽度和添加</
浏览 0提问于2020-04-10得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
