html表单代码例子_关于React的这些细节,你知道吗?-表单
在 React 里,HTML 表单元素的工作方式和其他的 DOM 元素有些不同,这是因为表单元素通常会保持一些内部的 state。例如这个纯 HTML 表单只接受一个名称:
此表单具有默认的 HTML 表单行为,即在用户提交表单后浏览到新页面。如果你在 React 中执行相同的代码,它依然有效。但大多数情况下,使用 JavaScript 函数可以很方便的处理表单的提交, 同时还可以访问用户填写的表单数据。实现这种效果的标准方式是使用“受控组件”。
受控组件
在 HTML 中,表单元素(如、 和 )之类的表单元素通常自己维护 state,并根据用户输入进行更新。而在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新。
我们可以把两者结合起来,使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
例如,如果我们想让前一个示例在提交时打印出名称,我们可以将表单写为受控组件:
由于在表单元素上设置了 value 属性,因此显示的值将始终为 this.state.value,这使得 React 的 state 成为唯一数据源。由于 handlechange 在每次按键时都会执行并更新 React 的 state,因此显示的值将随着用户输入而更新。
对于受控组件来说,每个 state 突变都有一个相关的处理函数。这使得修改或验证用户输入变得简单。例如,如果我们要强制要求所有名称都用大写字母书写,我们可以将 handlechange 改写为:
textarea 标签
在 HTML 中, 元素通过其子元素定义其文本:
而在 React 中, 使用 value 属性代替。这样,可以使得使用 的表单和使用单行 input 的表单非常类似:
请注意,this.state.value 初始化于构造函数中,因此文本区域默认有初值。
select 标签
在 HTML 中, 创建下拉列表标签。例如,如下 HTML 创建了水果相关的下拉列表:
请注意,由于 selected 属性的缘故,椰子选项默认被选中。React 并不会使用 selected 属性,而是在根 select 标签上使用 value 属性。这在受控组件中更便捷,因为您只需要在根标签中更新它。例如:
总的来说,这使得 , 和 之类的标签都非常相似—它们都接受一个 value 属性,你可以使用它来实现受控组件。
注意
你可以将数组传递到 value 属性中,以支持在 select 标签中选择多个选项:
文件 input 标签
在 HTML 中, 允许用户从存储设备中选择一个或多个文件,将其上传到服务器,或通过使用 JavaScript 的 File API 进行控制。
因为它的 value 只读,所以它是 React 中的一个非受控组件。将与其他非受控组件在后续文档中一起讨论。
处理多个输入
当需要处理多个 input 元素时,我们可以给每个元素添加 name 属性,并让处理函数根据 event.target.name 的值选择要执行的操作。
例如:
这里使用了 ES6 计算属性名称的语法更新给定输入名称对应的 state 值:
例如:
等同 ES5:
另外,由于 setState() 自动将部分 state 合并到当前 state, 只需调用它更改部分 state 即可。
受控输入空值
在受控组件上指定 value 的 prop 可以防止用户更改输入。如果指定了 value,但输入仍可编辑,则可能是意外地将value 设置为 undefined 或 null。
下面的代码演示了这一点。(输入最初被锁定,但在短时间延迟后变为可编辑。)
受控组件的替代品
有时使用受控组件会很麻烦,因为你需要为数据变化的每种方式都编写事件处理函数,并通过一个 React 组件传递所有的输入 state。当你将之前的代码库转换为 React 或将 React 应用程序与非 React 库集成时,这可能会令人厌烦。在这些情况下,你可能希望使用非受控组件, 这是实现输入表单的另一种方式。
成熟的解决方案
如果你想寻找包含验证、追踪访问字段以及处理表单提交的完整解决方案,使用 Formik 是不错的选择。然而,它也是建立在受控组件和管理 state 的基础之上 —— 所以不要忽视学习它们。
html表单代码例子_关于React的这些细节,你知道吗?-表单相关推荐
- java单链表例子_写一个java链表的例子?随便举例说一下。
展开全部 //单链表类 package dataStructure.linearList; import dataStructure.linearList.Node; //导入单链表结点类 impor ...
- java中自定义表单和流程_让驰骋工作流程引擎 ccbpm使用自定义表单来实现自己的业务逻辑....
1.1.1.1: SDK表单 概要说明:我们把流程引擎与表单引擎统称为ccbpm,但是有一些用户并不想使用表单引擎,而是用自己的表单,仅仅使用流程引擎,这样的方式就要采用ccbpm的sdk表单开发模式 ...
- 易语言单窗口单ip教程_金蝶K/3ERP系统应用教程:生产任务单的改制简易操作流程...
金蝶K/3ERP系统应用教程:生产任务单的改制简易操作流程 关注我,我将定期分享更多的ERP解决方案 如果您喜欢且觉得内容有用,请点击分享转发 如果你有什么关于ERP系统的问题和疑问,可私信联系我 大 ...
- 易语言单窗口单ip教程_金蝶K/3ERP系统应用教程:生产任务单下达的对系统数据的影响...
金蝶K/3ERP系统应用教程:生产任务单下达的对系统数据的影响 关注我,我将定期分享更多的ERP解决方案 如果您喜欢且觉得内容有用,请点击分享转发 如果你有什么关于ERP系统的问题和疑问,可私信联系我 ...
- vb.net form 最大化按钮 代码_【React】利用antd的form自定义表单控件
由于业务的需求,需要对Form表单进行自定义控件操作 业务需求如下: 首先点击选择按钮---在弹窗中选择产品--将选择好的产品展示在页面上,关于自定义组件的封装网上大牛的方法大多是封装好新的组件,从而 ...
- react做h5 例子_使用React写一个网站的心得体会
网站是毕业设计的作品,开发这个网站的目的主要用于记录一些笔记,以及聚合一些资讯信息,也算自己在网络世界中的一块静地吧,可以在这里一些技术上想法的实践. 网站最初前端使用vue开发,在前段时间由于项目的 ...
- windows系统和linux系统可以使用相同的js代码吗_「React 手册 」在 Windows 下使用 React , 你需要注意这些问题...
大家好,本篇内容,我要和大家聊聊使用 Windows 开发 React ,你需要注意的一些问题.首先说明下,我不是使用 windows 进行开发,因为其配置开发环境来说不是特别方便,我更喜欢 苹果ma ...
- mysql索引列是锁表还是锁行_[转]关于MYSQL Innodb 锁行还是锁表
关于mysql的锁行还是锁表,这个问题,今天算是有了一点头绪,mysql 中 innodb是锁行的,但是项目中居然出现了死锁,锁表的情况.为什么呢?先看一下这篇文章. 做项目时由于业务逻辑的需要,必须 ...
- excel撤销工作表保护默认密码_我的表格我做主:Excel工作表不想被别人改动,设置一个密码保护...
工作中,一个Excel表格需要多人填充数据时.或者发给同事的表格只允许查看时,不想表格回来时已面目全非. 今天小编教你设置工作表保护密码,不需要再三叮嘱,只允许查看表格数据的整体设置保护,需要多人填充 ...
最新文章
- 人类应鼎力进行探索的35种颠覆性技术
- 分享我的学习记录 svn地址
- [YTU]_2354 (H 实现复数类中的加运算符重载【C++运算符重载】)
- 58端口使用技巧跟推送_Kindle使用技巧:定时推送
- 用webstorm自动编译less产出css和sourcemap
- linux下drcom无法上网,drcom为什么还是不能上网啊!
- UE3 性能、分析及优化
- 数学连乘和累加运算符号_数学符号归纳
- 该如何清理手机的垃圾?
- 探索软件模式设计(一)
- jboss7 应用详解_【扔掉说明书114】本田 思域 2020款 舒适与娱乐功能详解
- 将安卓手机投屏到win10上
- HearthBuddy炉石兄弟 格雷迈恩
- iOS程序破解:获取应用商店上应用的ipa程序包
- 外网远程访问群晖NAS,内网穿透
- RK100键盘说明书
- 谷歌学术、中国知网生成参考文献
- 概率论————思维导图(上岸必备)(多维随机变量及其分布)
- 甲骨文特征提取与分类思路学习
- UDT的连接建立和释放
热门文章
- [JZOJ P1288] [DP]矩阵取数
- 移动端中如何检测设备方向的变化?
- svg defs 进行定义 引用
- MySQL中alter table range partition
- 给楠哥准备的入门单片机
- 写给准备参加秋招的学弟学妹们~一定要来看哦~
- Linux C高级编程——文件操作之库函数
- GetLocalTime
- vue抽屉_VUE组件 之 Drawer 抽屉
- jstl 获取 javascript 定义的变量_前端开发大牛完整总结出了JavaScript 难点 +最新web前端开发教程...