React 中的 getElementById

2024-03-12

目前出现此错误:

Uncaught TypeError: Cannot read property 'value' of null

我在下面的渲染函数中调用它:

<input type="submit" className="nameInput" id="name" value="cp-dev1" onClick={this.writeData}/>

我也尝试过在这里调用它

componentWillMount: function(){
        var name = document.getElementById('name').value;
      },

如何获取输入文本字段的 id 并读取该值并确保它不为空?

我认为 DOM 是在我尝试读取元素后加载的,因此为什么它是 null


你需要有你的功能componentDidMount生命周期,因为这是 DOM 加载时调用的函数。

利用refs访问 DOM 元素

<input type="submit" className="nameInput" id="name" value="cp-dev1" onClick={this.writeData} ref = "cpDev1"/>

  componentDidMount: function(){
    var name = React.findDOMNode(this.refs.cpDev1).value;
    this.someOtherFunction(name);
  }

有关更多信息,请参阅此答案如何在React中访问dom元素 https://stackoverflow.com/questions/38093760/how-to-access-a-dom-element-in-react-what-is-the-equilvalent-of-document-getele/38093981#38093981

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

React 中的 getElementById 的相关文章

  • 使用 Node.js 构建网站的最佳实践

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我想知道如何使用 Node js 从头开始 开发一个网站 我明白我怎么能possibly
  • 如何使用 Playwright 使用选择器查找框架 (iframe)

    我有一个小问题 无法找到使用 Microsoft Playwright 框架的答案 根据您可以使用以下代码获取 iframe const frame page frame frame login 但是如何使用选择器来查找 iframe 并与
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • 从 React Native Js 代码调用 Android Native UI 组件方法

    我创建了一个 CustomView SignatureView java 它扩展了 LinearLayout 以捕获 Android Native 中的签名 并创建了SignatureCapturePackage java和Signatur
  • 从回调中访问状态

    我在从回调访问组件状态时遇到问题 国家的价值num更改正确 但此类更改对于加载时定义的回调函数不可见 import React useState from react class MyObject callback gt void cons
  • 在 React 应用程序的 shell 脚本中设置环境变量

    我正在尝试在 powershell 和 bash 脚本中设置一些环境变量 并在 ReactJS 应用程序中读取它们 shell脚本很简单 env AUTHDOMAIN some domain com env AUTHCLIENTID bun
  • 本地推送通知到在应用程序内运行 JS 代码的 Win8 Live Tile

    我正在尝试将更新发送到我的应用程序的磁贴 当应用程序运行时 这可以正常工作 例如 当用户单击按钮时 我可以轻松地将磁贴更新通知发送到磁贴 我无法解决的是当应用程序无法运行时如何更新磁贴 我找到的唯一选择是使用以下命令从远程 Web 服务器拉
  • JavaScript 验证和 PHP 验证?

    我正在使用 jquery 验证插件来验证空表单 我还应该在 PHP 中检查一下以确保 100 正确吗 或者用 javascript 验证就可以了 谢谢 您应该始终在服务器上进行验证 如果用户以某种方式不使用 Javascript 提交表单
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • JavaScript 中的 Promise 有什么意义?

    一个承诺是一个 可能现在可用 或将来可用 或永远不可用的值 来源 MDN 假设我有一个想要处理图片的应用程序 图片已加载 例如在算法在后台使用它之后 或某种其他类型的延迟 现在我想检查一下图片是否可以在future 通过使用承诺 而不是回调
  • JavaScript RegEx:不同的结果:使用字符串和使用正则表达式“文字”构建模式?

    使用 RegExp 文字与字符串之间有什么区别吗 http jsfiddle net yMMrk http jsfiddle net yMMrk String prototype lastIndexOf function pattern p
  • 使用 Google 日历源时如何禁用 FullCalendar 中的活动链接?

    我正在使用 FullCalendar 库从 Google 日历加载日历中的事件 不幸的是 事件添加到日历后 它们是可点击的 当您点击该活动时 您会自动重定向到 Google 日历页面以查看该特定活动 或者如果您有足够的访问权限 则可以直接对
  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J
  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green
  • 仅当显式选择行时才关闭 ui-bootstrap typeahead

    我创建了这个jsBin http jsbin com livuqafe 2 edit来证明我遇到的问题 如果您转到此处 请尝试输入 五 并继续 你的自然反应是输入 五 然后按 Tab 如果你想要 五百 你可以向下箭头一次 但是 在这种情况下
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐

  • 为什么 UIElement.MoveFocus() 不将焦点移动到 ListBox 中的下一个同级元素?

    我有以下视觉树
  • 访问 Android Stock 浏览器设置

    我想通过代码访问 和更改 库存 Android 浏览器的设置 这可能吗 如果可能的话 如何 是的 这是编程问题 我想通过代码更改它 而不是通过手动单击 对 root 设备执行此操作怎么样 Android 的操作系统级安全模型基本上可以防止这
  • PyQt 允许枚举值和字符串

    在 PySide 中 我可以通过使用获取具有可能 允许的枚举值及其字符串表示形式的字典values属性 例如 QtWidgets QMessageBox StandardButton values items 如何在 PyQt4 PyQt5
  • 为什么禁用的 JavaFX TextArea 的颜色与 TextField 不同

    我正在重新设计 JavaFX 应用程序 但我有一个问题 disabled风格 当我尝试改变 fx text fill and fx opacity settings 文本区域的文本颜色仍然比文本字段稍浅 这是我现在得到的风格 Text Fi
  • AppDelegate.m 用于 FBSDK 和 LinkingManager

    要使用 FBSDK 我需要在应用程序委托中使用此代码片段 BOOL application UIApplication application openURL NSURL url sourceApplication NSString sou
  • 使用学习的人工神经网络来解决输入

    我最近再次深入研究人工神经网络 包括进化和训练 我有一个问题 关于什么方法 如果有的话 可以解决导致目标输出集的输入 这个有名字吗 我试图寻找的一切都会导致我进行反向传播 但这不一定是我所需要的 在我的搜索中 我最接近表达我的问题的是 是否
  • 为什么 tailwind css 类名中有一个反斜杠?

    我正在尝试学习和使用最近非常流行的新实用程序框架 顺风CSS https tailwindcss com 当我使用文档中的说明编译 css 时 我看到很多 css 类名都有冒号 其中 前面有一个反斜杠 这是为什么 是为了让CSS明白有一个
  • Vagrant + Xdebug + Atom

    我有一个安装了 xdebug 的 vagrant box 在 OSX 上运行 但我很难获取 Atom xdebug 插件 php debug 连接到它 我粘贴了phpinfo 将数据输入 xdebug 验证站点 结果显示一切正常 并且您可以
  • 使用短信验证设备的电话号码

    我正在尝试通过让设备向自身发送短信并自动检查是否已收到短信来验证 Android 设备的电话号码 我怎样才能做到这一点 首先 这需要两个权限 一种用于发送短信 另一种用于接收短信 以下内容需要在您的 AndroidManifest xml
  • navigationToURL 通过 POST 发送数据到 php 页面

    想象一下 我在 Flash 应用程序中有一个表单 其中包含两个字段 input1 和 input2 当用户填写完此表单后 它会转到 php 页面 目前 我正在使用 GET方法发送数据 像这样 var request URLRequest r
  • SIM卡认证

    我是 SIM 卡新手 我正在尝试使用 Gemalto JCardManager 金雅拓开发人员套件的一部分 和 Gemplus USB 智能卡读卡器对 SIM 卡进行身份验证 显然 我拥有所有必要的密钥 kic kid 和 kik 但我无法
  • vuetifyjs:仅添加使用过的图标来构建

    我目前正在使用默认的 Material Design Icons 构建一个 vuetifyjs app 在生产版本中 我仅使用该字体的 2 个图标 由 vuetify 组件芯片使用 按照建议 我包含了完整的 iconfont 但生产版本迫使
  • FormsAuthentication 对象已过时 [使用 MVC5]

    我在 MVC5 站点中使用以下代码 HttpPost ValidateAntiForgeryToken public ActionResult Login LoginModel loginModel if ModelState IsVali
  • 从 Matlab 调用 R

    我曾经能够通过系统调用从 Matlab 调用 R system usr bin R no save lt myscript R 但现在 使用 Matlab R2012b 和 R 版本 3 0 0 2013 04 03 Masked Marv
  • Android - 在单独的类中使用共享首选项?

    我想使用 android 中的共享首选项保存数据 但我希望使用单独的类来完成这项任务 我已经实现了该类 如下所示 import android content Context import android content SharedPre
  • 不变函子的例子?

    我正在阅读monad 层包的文档 http hackage haskell org package layers 0 1 docs Documentation Layers Overview html我的大脑快要沸腾了 In the mmt
  • 如何配置 gradle 仅对某些依赖项组使用本地存储库?

    工作关 闭gradle 依赖文档 http www gradle org dependency management html 我们有一个包含这样的片段的 build gradle repositories mavenCentral ivy
  • RijndaelManaged:第四代?

    我想在我的应用程序中实现最安全 最可靠的对称密钥加密形式 用户应该输入密码来加密 解密 仅此而已 对于 RijndaelManaged 必须输入密钥和 IV 我不知道如何解决这种情况 现在 我输入的密码经过 SHA256 哈希处理 然后用作
  • MATLAB 对 2D 和 3D 矩阵进行排序并通过索引访问

    假设你有一个一维矩阵 a rand 1 5 sa i sort a then sa and a i 是相同的 然而 如果矩阵的大小增加 a rand 3 4 sa i sort a then sa and a i 不一样 当我尝试按三维矩阵
  • React 中的 getElementById

    目前出现此错误 Uncaught TypeError Cannot read property value of null 我在下面的渲染函数中调用它