如何使用 React 以编程方式填充输入字段值?

2023-11-23

我有一个带有一些输入字段的模式。我可以轻松地通过用户键入输入来自动传递数据,使用onChange输入字段中的函数,如

<Input onChange={this.props.store.handleCategoryChange} type="text" />

和..(使用 mobx 商店,但不相关)

@observable categoryValue;
@action handleCategoryChange = (e, data) => {
    this.categoryValue = data.value;
    e.preventDefault();
};

但是,我想添加一个功能,用户可以在应用程序中的其他位置预先填写信息。我有数据可以预先填充输入字段,但我不知道如何在用户不执行的情况下实际以编程方式输入它?

我需要调用上面的handleCategoryChange功能。但我的变量将等于data.value..这提出了一个问题!自己调用这个函数是不可能的,因为我不会有这个事件e也不是一个叫做data.value因为我将“只是”单独传入一个变量。

在 React 中使用其他地方的变量以编程方式自动填充输入字段的正确方法是什么?我需要调用onChange函数以某种方式运行,但输入值会有所不同..


Use 受控组件对于这种情况,定义一个value的财产input element像这样:

<Input value={variable_name} ....

每当您更新该变量时,该值都会自动填充到输入元素中。

现在您可以通过分配一个值来填充一些默认值variable_name用户可以通过以下方式更新该值onChange功能。

As per DOC:

一个输入表单元素,其值由React以这种方式控制 称为“受控组件”。

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

如何使用 React 以编程方式填充输入字段值? 的相关文章

  • 如何使用Vue3中的ref访问父组件中的子组件方法?

    我正在尝试使用 vue3 和 ref 方法访问父组件中的子方法 但它返回一个错误 未捕获的类型错误 addNewPaper value savePaper 不是函数 下面是我的代码 请指导我哪里错了 子组件
  • Javascript 的 toUpperCase() 语言安全吗?

    请问Ja vascript的String原型方法toUpperCase 在每种支持 UTF 8 的语言 字符集中提供自然预期的结果 我尝试过简体中文 韩语 泰米尔语 日语和西里尔语 到目前为止结果似乎是合理的 我可以信赖该方法是语言安全的吗
  • javascript Array.prototype.push 如何连接

    我已经看到数组的 push 方法用于替换串联 但我不完全确定它是如何工作的 var a 1 2 3 var b 4 5 6 Array prototype push apply a b 它如何就地连接而不是返回一个新数组 apply htt
  • For 循环覆盖 HTML 中的文本

    我的数组称为myEmployees其中有 5 个名字 但当我运行代码时 它只打印出其中的 3 个 我相信这种情况正在发生 因为for脚本中的循环会覆盖它在 HTML 文档中编写的前一行 我怎样才能解决这个问题 年度公告板公告 恭喜泰勒 你在
  • 获得焦点时如何移动文本框视口?

    我有一个文本框 其中可能包含大于文本框大小的字符串 当我打字时 文本框 视口 总是移动以显示我输入的最后一个字符 例如 当您在 SO 问题中写下一个非常大的标题时 A 问题是 如果文本框失去焦点 当它再次聚焦时 视口总是设置在文本的开头 而
  • 如何在严格模式下设置元素样式属性?

    Given body document getElementsByTagName body 0 iframe document createElement iframe iframe src protocol settings script
  • Javascript If 语句的语义是什么

    我一直认为 if 语句本质上比较它的论点类似于 true 然而 Firebug 中的以下实验证实了我最担心的事情 在编写 Javascript 15 年之后 我仍然不知道 WTF 发生了什么 gt gt gt true false gt g
  • Google Analytics 服务器端授权获取页面浏览计数分析数据并将其显示在首页上的随机访问者

    如何显示您网页的访问者计数 而无需像 Google Analytics 那样登录或进行身份验证 我正在尝试实施 Google Analytics 服务器端授权来获取页面浏览计数分析数据并将其显示给首页上的随机访问者 我阅读了他们的文档并找到
  • Node.js 中的 SetTimeout 问题

    我有以下代码 它在 Chrome V8 下运行良好 但在节点内失败 var id id setTimeout TimeoutHandler 10 console log SET function TimeoutHandler clearTi
  • Django CBV表单提交返回的JSON显示为新页面

    我正在使用 Django 3 2 我正在创建一个简单的时事通讯订阅表格 表单提交将 JSON 返回到前端 然后应该使用前端来更新页面的部分内容 但是 当我发布表单时 JSON 字符串将在新页面上显示为文本 这是调用视图的路由 urlpatt
  • 表格中与文本一起内嵌 D3 迷你图

    假设有一个这样的表 var data Orange Orange 6 3 3 2 5 Apple Red 6 2 6 5 5 Grape Purple 9 1 2 3 1 我希望将字符串表示为字符串 但将数字数组表示为 D3 折线图 如果这
  • this 关键字是构造函数中的窗口对象

    好吧 所以我以为我理解了这一点 没有双关语的意思 但显然不是 var Constructor function var internalFunction function return this window this myMethod f
  • 如何在phonegap中同时使用相机API选择多个图像?

    如何同时选择或拾取多个图像phonegap camera API使用时Camera DestinationType FILE URI 我一次只能选择一张图像 我可以使用以下命令在 SD 卡中选择多个文件 包括 txt pdf this ht
  • 重写node.js中其他模块中的函数

    我正在尝试在 Node js 应用程序中使用 nodeunit 存根函数 这是我正在尝试做的事情的简化版本 In lib file js var request require request var myFunc function inp
  • 使用 Firefox 插件发出跨域 ajax 请求

    我对如何在 Firefox 插件中发出跨域 ajax 请求感到有点困惑 LastPass 和 Xmarks 等插件建议你可以做到这一点 但是当我尝试用 google 搜索你是如何做到这一点时 每个人似乎都说你不能 除非用户在 Firefox
  • 从 git repo 拉取后出现白屏死机(React JS、Nginx)

    每当我从 master 分支执行 git pull 到服务器上时 我所有的 React 文件似乎都消失了 屏幕变成白色 我发现的临时解决方法是 删除浏览器 cookie 缓存和站点历史记录 然后关闭浏览器并重试 删除node modules
  • PhoneGap文件传输错误1、哪里写FileTransfers?

    相关 https stackoverflow com questions 21044197 download file and store them locally in sdcard using phonegapbuild https s
  • 如何在 jest 中测试调用和应用函数?

    这是我的callnapply js file const callAndApply caller object method nameArg ageArg tShirtSizeArg method call object nameArg a
  • 获取类的公共属性而不创建它的实例?

    假设我们有一个 JavaScript 类 var Person function function Person name surname this name name this surname surname Person prototy
  • Apollo 服务器,Graphql - 必须提供查询字符串

    我不确定我在这里做错了什么 我现在已经被困了一段时间 让我的突变在无服务器设置中与我的 apollo server lambda 一起运行 当我尝试运行这样的查询时 我的查询工作正常 mutation signIn username Som

随机推荐

  • IPython 导入失败和 python sys.path 一般情况

    我正在关注这个post让一个 ipython 统治所有 virtualenvs 据我了解 这篇文章的主要思想是 当在 virtualenv 中时 ipython 找不到它的模块 a virtualenv me pc ipython Trac
  • 从服务器 HTTPS 接收并验证证书 - android

    我正在通过 https 从 Android 客户端调用 Web 服务 我必须验证从服务器端收到的证书 我怎么做 目前 这是我用来调用网络服务的代码 private static String SendPost String url Arra
  • 如何在 Jekyll 中链接到没有 html 扩展名的 page.url 页面?

    我正在 Jekyll 中建立一个网站 为了删除帖子中的 html 扩展名 我将以下内容添加到 config yml permalink kb title 为了从页面中删除 html 扩展名 我为每个页面创建了文件夹 并在每个页面文件夹中放置
  • 如何有条件地为表格单元格中的背景着色?

    我正在渲染一个表格p 数据表 PrimeFaces 我想要做的是根据单元格内容的值对单元格的背景进行着色 这与为行或列着色不同 它是单个单元格 首先是CSS问题 如果我这样做
  • 从 HTML 页面源下载图像文件

    我正在编写一个抓取工具 用于从 HTML 页面下载所有图像文件并将它们保存到特定文件夹中 所有图像都是 HTML 页面的一部分 下面是一些代码 用于从提供的 URL 下载所有图像 并将它们保存在指定的输出文件夹中 您可以根据自己的需要对其进
  • Flutter widget 测试选择另一个项目时不会触发 DropdownButton.onChanged

    我正在编写一个 Flutter Web 应用程序 并向我的代码库添加一些小部件测试 我很难让 flutter test 按预期工作 我当前面临的问题是尝试在 DropdownButton 中选择一个值 以下是重现问题的完整小部件测试代码 v
  • 添加和删​​除 JLabel 上的图标

    您好 我有一个标签 我已为其设置了图标 我想在单击按钮后删除此图标 它的方法是什么 Create icon Icon icon new ImageIcon getClass getResource foo bar baz png Creat
  • 掩蔽者在 SHAP 包中真正做了什么并让他们适合训练或测试?

    我一直在努力与shap包裹 我想从我的逻辑回归模型中确定形状值 与此相反TreeExplainer the LinearExplainer需要一个所谓的掩蔽器 这个掩码器到底有什么作用 独立掩码器和分区掩码器有什么区别 另外 我对测试集中的
  • Windows中当前目录和工作目录的区别

    Windows 中的当前目录和工作目录有什么区别 如何更改 Notepad 或 Mozilla Firefox 等应用程序的工作目录 当前目录和工作目录只是同一事物的两个不同名称 每个进程维护一个当前目录 当前目录在启动时指定为用于创建进程
  • 正则表达式在尊重 CDATA 的同时转义 HTML 和符号

    我编写了一个内容管理系统 它使用服务器端正则表达式在页面响应发送到客户端浏览器之前对页面响应中的 符号进行转义 正则表达式会注意已转义的或属于 HTML 实体一部分的 符号 例如 以下内容 a b c amp d copy 2009 更改为
  • jQuery AJAX 调用弄乱了字符编码

    我有一个输出 JSON 的 servlet Servlet 的输出编码是 ISO 8859 1 我们的网络应用程序中的页面也设置为 ISO 8859 1 我会使用 UTF 8 但这超出了我的控制范围 我们必须使用 ISO 8859 1 当我
  • 了解 CPU 如何决定将哪些内容加载到高速缓存中

    假设一台计算机有 64k 的 L1 缓存和 512k 的 L2 缓存 程序员在主内存中创建 填充了一个包含 10mb 数据的数组 例如 3D 模型的顶点 索引数据 该数组可能包含一系列结构 例如 struct x vec3 pos vec3
  • 通过 Firebase 电子邮件/密码身份验证进行 CSRF 保护

    我正在努力将我的 Node js 应用程序部署到生产环境中 我们遇到了一些 CSRF 问题 但在深入研究问题并了解有关 CSRF 攻击的更多信息后 我想知道我们是否需要执行这些检查 我们的 API 已从 CSRF 检查中列入白名单 因此依赖
  • http://schemas.microsoft.com/winfx/2006/xaml/presentation 定义

    当您在 Visual Studio 中创建新的 WpfApplication 项目时 您将获得以下 XAML 复制并粘贴 URLhttp schemas microsoft com winfx 2006 xaml presentation在
  • 显示线框和纯色

    是否可以在同一对象上显示对象的线框及其面的纯色 我找到了一种使用对象克隆并分配不同材质的方法 例如 var geometry new THREE PlaneGeometry plane width plane height width 1
  • CSS 以百分比进行翻译会导致图像模糊

    我遇到过这个非常烦人的问题 当您将图像与变换对齐时 基于百分比进行平移会导致图像稍微模糊 这仅与百分比结盟 考虑这个CSS img display block height auto max width 100 transform tran
  • 提高 ASP.NET 应用程序的性能

    如何提高 ASP NET 应用程序的性能 我应该注意哪些领域 该应用程序包括数据库连接和图像解析等 编写高性能 Web 应用程序的 10 个技巧 提高 ASP net 应用程序性能的 20 个技巧 Bye
  • 已超过最大帧长度 65536

    我有一个设置 我使用 gremlin core 库来查询远程 Janusgraph 服务器 目前数据大小适中 但将来会增加 几天前 我在客户端上看到 已超出最大帧长度 65536 错误 我的服务器 yaml 文件中 maxContentLe
  • 低功耗蓝牙 GATT 安全级别

    我正在研究与 GATT 相关的低功耗蓝牙 BLE 中可用的安全类型 更具体地说 使用指定不同安全级别 低 中 高 的 gatttool 时会执行哪些操作 我的理解是 BLE 中的安全管理器支持 4 种不同的安全属性 没有配对 与不支持中间人
  • 如何使用 React 以编程方式填充输入字段值?

    我有一个带有一些输入字段的模式 我可以轻松地通过用户键入输入来自动传递数据 使用onChange输入字段中的函数 如