React:获取 contentEditable div 内文本的值

2024-04-24

我正在使用一个contentEditablediv 并希望在调用提交时获取其中的文本。我试过this.refs.textarea.value.trim()但这似乎不起作用。我的代码在渲染返回中如下

<div><form onSubmit={this.handleSubmit} id="noter-save-form" method="POST">

<div id="noter-text-area" contentEditable="true" ref="textarea">{value}</div>

and the handleSubmit功能。

handleSubmit: function(e) { 
  e.preventDefault();
  var text = this.refs.textarea.value.trim();
  alert(text);
  this.saveFile(text);
},

谢谢您的帮助。我只是想用可编辑 div 中实际的内容替换文本变量。


如果它是一个div,它是否可编辑并不重要并且应该是this.refs.textarea.innerHTML如果你只想要文字this.refs.textarea.innerText

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React:获取 contentEditable div 内文本的值 的相关文章

  • 淡化背景但不淡化文本

    我已经对 div 应用了 CSS 淡入 淡出解决方案 在很大程度上我对此感到满意 但是我只想将其应用于背景 而不是文本 我需要文本始终完全不透明 参见示例 http jsfiddle net howiepaul gUAPV 33 http
  • 如何修复错误嵌套/未闭合的 HTML 标签?

    我需要通过使用正确的嵌套顺序关闭任何打开的标签来清理用户提交的 HTML 我一直在寻找一种算法或Python代码来做到这一点 但除了PHP等中的一些半生不熟的实现之外 还没有找到任何东西 例如 类似的东西 p p ul li Foo bec
  • 将背景图像保留在底部

    我一直在研究将图像保留在底部页面的解决方案 我目前得到的代码是 footer background image url images footer png background repeat repeat x position absolu
  • 如何按高度对 DIV 进行排序?

    我有三个divs 我想按高度从最大到最小对它们进行排序 div smallest div div largest div div middle div 任何想法 这很简单 使用 sort http www wrichards com blo
  • CSS/Javascript 将单词与特定字符对齐

    我如何使用 CSS Javascript 将 html 中的单词与该单词中的任意字符对齐 更改对齐字符的样式 例如使其粗体 以与其他字符形成对比 如本例中所示 对齐和粗体 k e t 和 f stack overflow stack ove
  • 双向数据绑定(Angular)与单向数据流(React/Flux)

    上周 我一直在试图弄清楚如何双向数据绑定 Angular https docs angularjs org guide databinding and 单向数据流 React Flux https youtu be i 969noyAM是不
  • 从 React Native 中的数组映射函数动态渲染内容

    我正在尝试从数组中获取数据并使用映射函数来呈现内容 看着 this lapsList 以及相关的 lapsList 函数来理解我想要做什么 结果是没有显示任何内容 视图下的视图等 这是我的简化代码 class StopWatch exten
  • 为什么百分比边距会导致换行?

    div style background color dd3fb8 a style margin left 10 a a a b a a c a div 在上面的示例中 字母 c 将在新行上 但如果我将 margin left 设置为px单
  • React router 如何点击查看详细组件

    我有两个组件 Car 和 CarDetails 我想用超链接 link 来显示 cars 组件中的所有汽车 当用户单击时 它应该将 carid param s 传递给 CarDetails 组件 App js import React Co
  • React Native 中未捕获的引用错误?

    我在 React Native 中遇到了未捕获的引用错误 为什么会这样 我能够成功构建 但捆绑程序显示此错误 我该如何解决它 注意 我使用的是Windows 10 截屏 包 json name rchampz version 0 0 1 p
  • 如何在html5中使用现有的sqlite数据库

    我已经使用 sqlite 浏览器创建了一个 sqlite 数据库文件 我有一个文件 sample sqlite 现在我想知道如何在 javascript 中导入此文件并使用 sqlite 文件中的数据 我一直在使用下面提到的脚本 var d
  • 关于在 Bootstrap 中对齐网格项的 CSS 指南

    我正在尝试显示项目网格 并且图片的高度和宽度都不同 并且细节可能长或短 导致页面上的换行符数量不同 This is what I want it to look like And here is what it actually looks
  • 表、TR各2个循环、PHP、HTML

    我有一个 html 表 我使用一些循环来获取一些数据 该数据以这种方式显示 tr td Data td tr next loop 但我不希望它每 2 个甚至 3 个循环关闭表行 tr 所以数据可能如下所示 tr td Data td td
  • 在 package.json 中声明时 Reactify 转换未运行

    我正在尝试将reactify 转换与browserify 和gulp 结合使用 这个 gulp 任务有效 return browserify paths node modules app scripts entries app script
  • Firefox 中缺少表格边框

    我有一个包含数据的表格 当我在 Firefox 中查看它时 某些边框没有显示 请参阅随附的屏幕截图 在任何其他浏览器中都不会发生这种情况 在 Firefox IE Safari 和 Chrome 中测试 知道为什么以及如何解决它吗 我使用样
  • 如何将日期格式设置为 (dd/mm/yyyy hh:mm:ss)

    如何将下面的日期转换为此模板 dd mm yyyy hh mm ss 05 04 2021 14 52 我尝试这样做 但我只得到时间 而不是日期和时间 var data new Date 05 04 2021 14 52 var time
  • 如何判断一个app是原生的还是html5的? [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我想知道移动应用程序是如何原生或 html5 的 有没有什么软件或者网站可以说明这一点 如何检测应用程序是本机应用程序还是 html5 您可以使用 w
  • 为什么 Firefox 对“select”标签上的“click”事件的反应与 Webkit 和 IE 不同?

    我意识到 Firefox 对待click事件于
  • 使用 CSS 更改文本选择颜色?

    我目前正在开发一个网站 我想更改文本选择颜色 我已经有点工作了 这是我的样式表中的代码 部分 selection background FF0099 color black text shadow none moz selection ba
  • 如何隐藏表格行溢出?

    我有一些 html 表 其中文本数据太大而无法容纳 因此 它垂直扩展单元格以适应这种情况 因此 现在存在溢出的行的高度是数据量较小的行的两倍 这是无法接受的 如何强制表格具有相同的行高1em 这是一些重现该问题的标记 表格应该只有一行的高度

随机推荐

  • 如何以百分比形式获取mysql匹配结果?

    我在用匹配 Col1 对阵 Val 在mysql中 select match body against body var from articles 现在 如果完全匹配 我将得到数字形式的结果 例如 14 43 这个数字是什么意思 主要问题
  • B2C 和 Azure 应用服务的 CORS 问题

    我通过在控制器中使用 AddCors 和 EnableCors 在我的 ASP NET Angular 应用程序中启用了 CORS 我的应用程序正在与 AD B2C 页面进行通信 构建后 我在控制台中出现此错误 访问 XMLHttpRequ
  • 如何在 ChartJS 2.0 中隐藏超出 x 轴的值?

    如何在 ChartJS 2 0 中隐藏超出 x 轴的值 您会注意到图表突出超过了 60 标记 x 轴使用时间刻度 我设置了最大值和最小值 这是我的图表配置 type line data datasets label Scatter Data
  • 获取纸张下拉菜单的选定值

    我用的是聚合物paper dropdown menu https www polymer project org 0 5 docs elements paper dropdown menu html作为我的项目的下拉菜单 现在 当用户从下拉
  • Android 分辨率和模拟器未选择正确的图像

    我有一个关于 Android 分辨率及其在模拟器上如何表示的快速问题 我已经建立了一个测试项目来测试许多不同的分辨率以及它们在每个方向上的外观 所以我创建了drawable land ldpi mdpi hdpi xhpdi并对drawab
  • 使用 Intellij 调试 Scala 宏

    我有一个 sbt 项目 我运行 gen idea 来设置它以与 Intellij 12 4 一起使用 在一个项目中是我的主代码 另一个项目中有我的宏代码 当尝试通过以下测试文件调试我的宏时http docs scala lang org o
  • 创建一个新的颜色可绘制对象

    我正在尝试将十六进制值转换为整数 以便我可以创建一个新的颜色可绘制对象 我不确定这是否可能 但根据文档 https developer android com reference android graphics drawable Colo
  • getApplication() 与 getApplicationContext()

    我找不到令人满意的答案 所以我们开始 这是怎么回事Activity Service getApplication and Context getApplicationContext 在我们的应用程序中 两者都返回相同的对象 在一个Activ
  • 大数据库用什么DB?

    我正在着手一个项目 在不久的将来可能会跨越数百万行 所以我正在研究我使用的数据库 因为这肯定会证明是一个问题 据我所知 一旦表的行数达到 2 000 000 行 SQL 的所有版本都会出现问题 对于这些大型项目有推荐的好数据库吗 这是我正在
  • 为什么 Python 3 http.client 比 python-requests 快这么多?

    我今天测试了不同的 Python HTTP 库 我意识到http client https docs python org 3 library http client html库的执行速度似乎比requests http docs pyth
  • C 中指针的冒泡排序,输入末尾的预期声明或语句

    我尝试使用指针引用数组元素来实现冒泡排序 而不是使用数组索引 void bubble p long long int main long count 10 int i long data 5 2 1 7 10 6 8 4 9 0 bubbl
  • 缺少 Haskell 原语来连续将函数应用于列表的每个元素?

    在 Haskell 中 众所周知map原语可用于将给定函数应用于all列表的元素 gt map toUpper abcd ABCD gt 在尝试生成有限集 列表 的所有分区时 以下类似的原语会很方便 gt sap toUpper abcd
  • MySQL 中的一对多查询

    在 MySQL 中查询一对多的最佳方式是什么 这是我正在开发的数据库的简化版本 如果有什么看起来不对劲告诉我 CREATE TABLE Tenant tenant id int NOT NULL first name varchar 20
  • JAVA 中的四舍五入

    我想四舍五入 ex 的值 12 166666 gt 12 00 12 49999 gt 12 00 12 5111 gt 13 00 12 9999 gt 13 00 我想将 50 派塞四舍五入 你可以看看Math round double
  • 在cocos2D游戏环境中应用缩放效果?

    我正在开发一款游戏cocos2D游戏引擎并加载所有sprites当它加载关卡时 现在因为一些sprites 障碍物 高于 320 像素 因此看起来很难检查出来 所以为了方便起见我想申请ZOOM IN and ZOOM out效果 一次最小化
  • C# 动态创建 LinkBut​​ton 命令事件处理程序

    所以我这里有一个奇怪的情况 我有一个 System Web UI WebControls WebParts EditorPart 类 它呈现一个 搜索 按钮 当您单击此按钮时 它的 clickHandler 方法会执行数据库搜索 并为其返回
  • ND 输入的 im2col 算法

    我正在尝试为输入维度 gt 2D 编写自己的 im2col 算法 目前我正在研究 Matlab im2col 的实现 但是 我找不到任何有关二维以上输入的情况的文档 如果我将 3D 张量输入到函数中 我确实会得到输出 不过我不太明白你是如何
  • 使用 javascript 下载时 PDF 为空

    我有一个 Web 服务 可以在其响应中返回 PDF 文件内容 当用户单击链接时 我想将其下载为 pdf 文件 我在UI中编写的javascript代码如下 http get http MyPdfFileAPIstreamURl then f
  • 播放声音 Javascript/Jquery

    我正在构建一个基于 Ajax 的应用程序 它将在我们的本地 Intranet 网络上运行 现在 每次 Ajax 返回请求时 我都需要在客户端浏览器中播放声音 我想将声音文件 mp3 wav 放入我的 Web 服务器 Tomcat 目录中 应
  • React:获取 contentEditable div 内文本的值

    我正在使用一个contentEditablediv 并希望在调用提交时获取其中的文本 我试过this refs textarea value trim 但这似乎不起作用 我的代码在渲染返回中如下 div div