使用react实现select_React笔记——核心概念:9.表单

1、受控组件

  • 在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新。
  • state:唯一数据源
  • 渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
  • 示例:
9ac451e621a3985ce281856c89a68e0b.png
b1958f419e673e48c651bfae28442548.gif

2、Textarea标签

在 HTML 中, 元素通过其子元素定义其文本
e8e82b06c26af1a85a9af3446fca0bff.png
在 React 中, 使用 value 属性代替示例:
b77029cb89dd4448e64c42b3bebce915.png

3、Select标签

在 HTML 中, 创建下拉列表标签
568631fefd70f9b237e90abcbd5e96c5.png
React 在根 select 标签上使用 value 属性单选示例:
a1a73c9d889f63dde9d596ec41e94631.png
b551c3b772d4bf711ce64003bee1cdc6.gif
多选示例:
6312f75c178ab5b8739948ba09083a81.png
8e74aa1ff05868039eb0d98dccc495bc.png
9098081847988bb219eb51706d3c66c5.gif

4、文件 input 标签

  • 因为它的 value 只读,所以它是 React 中的一个非受控组件
3889965ec8af32da5ab023f3ad1b7935.png

5、处理多个输入

  • 当需要处理多个 input 元素时,我们可以给每个元素添加 name 属性,并让处理函数根据 event.target.name 的值选择要执行的操作。
  • 示例:
ea74f0e2b0613446fbfa18217bd31ce0.png
280f984140ce76c7b6229b59cf983331.png
83910eb41f1bc0bf6916872a57b82c4b.gif
  • 使用了 ES6 计算属性名称的语法更新给定输入名称对应的 state 值
0baecc78afde8e658a53902ac0d48fe5.png

6、受控输入空值

  • 在受控组件上指定 value 的 prop 会阻止用户更改输入。如果你指定了 value,但输入仍可编辑,则可能是你意外地将value 设置为 undefined 或 null。
  • 示例:
2c994a095922143cc8808d059494d014.png

7、受控组件的替代品

  • 使用非受控组件, 这是实现输入表单的另一种方式。

8、成熟的解决方案

  • 包含验证、追踪访问字段以及处理表单提交的完整解决方案,使用 Formik 是不错的选择

关联文章:

  • React笔记——核心概念:1.Hello World
  • React笔记——核心概念:2.JSX简介
  • React笔记——核心概念:3.元素渲染
  • React笔记——核心概念:4.组件&Props
  • React笔记——核心概念:5.State&生命周期
  • React笔记——核心概念:6.事件处理
  • React笔记——核心概念:7.条件渲染
  • React笔记——核心概念:8.列表&Key

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/514286.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

压测场景下的 TIME_WAIT 处理

简介: 压测场景下的 TIME_WAIT 处理 1. 序 某专有云项目具备压测场景,在Windows的压测机上用 LoadRunner 进行业务的压力测试,压测运行一段时间后出现大量端口无法分配的报错。 其实通过问题描述,以及 Windows的报错信息基本确定…

DataX在数据迁移中的应用

简介: DataX在数据迁移中的应用 1. DataX定义 首先简单介绍下datax是什么。 DataX是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL、Oracle、SqlServer、Postgre、HDFS、Hive、ADS、HBase、TableStore(OTS)、MaxCompute(ODPS)、DRDS…

华为发布《绿色5G白皮书》,定义绿色5G网络八大技术方向

全球“碳达峰、碳中和”已成主流趋势,为了助力全球运营商绿色网络“双碳”行动计划的达成,在华为首届无线媒体沙龙上,华为无线网络SRAN产品线总裁马洪波发表了“绿色5G,E2四化八大方向,共赢双碳未来”主题演讲&#xf…

判断是否包含大写字符_Python最常用的数据类型中字符串基础函数使用知识点讲解...

字符串是 pthon 中最常用的数据类型。我们可以使用单引号、双引号或者三对单双引号来创建字符串。创建字符串很简单,只要为变量分配一个值即可。Python 的字符串有什么内建函数可以使用?len()方法返回对象(字符、列表、元组等)长度或项目个数。每个字符一…

Arthas 使用的各类方式

简介: Arthas 是阿里巴巴开源的 Java 诊断工具。让我们能够在线排查项目发生的问题。除了知道它的存在之外,我们也需要知道我们如何去安装使用它,以便于提高我们日常开发解决 BUG 的效率。 方案介绍 方案一:本地直接运行 往往最…

antd autoplay按f12才会轮播_涨知识了!原来这才是电脑键盘上,F1到F12的正确用法...

在这个快节奏的时代,工作效率可以说是非常重要的,所以熟练掌握电脑就是提高效率的好方法!那如何快速的掌握电脑呢?这就不妨先了解下键盘上F1-F12的正确用法哦,每个都是提高效率的快捷键。F1:获取帮助如果你…

新型数据中心需要什么样的存储

作者:浪潮信息首席架构师 叶毓睿 智算时代的序幕已经拉开,互联的万物,一切皆计算机。智慧计算融入到千行万业的图景,正在徐徐铺开。这是一个数据成为生产要素的时代,智慧计算将劳动者由人变成了人AI,将数据…

王者荣耀服务器未响应8月5日苹果,王者荣耀:世冠小组赛8月5日前瞻预测

14:00 深圳DYG vs GOG深圳DYG在上周的比赛遭遇两连败,目前排在A组倒数第二位。队伍进行人员轮换后,Giao在比赛中的发挥可圈可点,但其他队员的状态都下滑明显。辅助位星宇从春季赛的状态就一般,到本次世冠仍然没有提升,…

多中心容灾实践:如何实现真正的异地多活?

简介: 在异地多活的实现上,数据能够在三个及以上中心间进行双向同步,才是解决真正异地多活的核心技术所在。本文基于三中心且跨海外的场景,分享一种多中心容灾架构及实现方式,介绍几种分布式ID生成算法,以及…

HBM3内存子系统传输速率惊人,带宽突破1TB/S!

记者 | 邓晓娟 8月25日,内存IP厂商Rambus推出HBM3内存接口子系统。内含完全集成的PHY和数字控制器,传输速率达8.4Gbps;可为AI/ML和高性能计算(HPC)等应用和解决方案提供1TB/s的带宽速率;采用标准的16通道设…

android 如何读取cgi_Python基础教程(十):CGI编程、MySQL数据库

Python CGI编程什么是CGICGI 目前由NCSA维护,NCSA定义CGI如下:CGI(Common Gateway Interface),通用网关接口,它是一段程序,运行在服务器上如:HTTP服务器,提供同客户端HTML页面的接口。网页浏览为了更好的了解CGI是如何工作的&…

10亿+文件数压测,阿里云JindoFS轻松应对

简介: Apache Hadoop FileSystem (HDFS) 是被广为使用的大数据存储方案,其核心元数据服务 NameNode 将全部元数据存放在内存中,因此所能承载的元数据规模受限于内存,单个实例所能支撑的文件个数大约 4亿。JindoFS块模式是阿里云基…

一文简单弄懂tensorflow_在tensorflow中设置梯度衰减

我是从keras入门深度学习的,第一个用的demo是keras实现的yolov3,代码很好懂(其实也不是很好懂,第一次也搞了很久才弄懂) 然后是做的车牌识别,用了tiny-yolo来检测车牌位置,当时训练有4w张图片&a…

打破“单点防护”缺陷,山石网科发布“云网端”XDR解决方案

编辑 | 宋 慧 供稿 | 山石网科 出品 | CSDN云计算 近年来,CISO面临的安全形势可谓“内忧外患”,对内面临多样化的网络接入途径、庞大且繁杂的IT资产;对外面临攻防关系、攻防手段、网络攻击的数量等呈指数级增长等问题,给组织的…

Serverless 场景下 Pod 创建效率优化

简介: 众所周知,Kubernetes 是云原生领域的基石,作为容器编排的基础设施,被广泛应用在 Serverless 领域。弹性能力是 Serverless 领域的核心竞争力,本次分享将重点介绍基于 Kubernetes 的 Serverless 服务中&#xff0…

安装wordcloud_COVID19数据分析实战:WordCloud 词云分析

↑↑点击上方蓝字,回复资料,N个G的惊喜前言上一篇文章(链接)我们对COVID19_line_list数据集进行了清洗以及初步分析。本文中我们将分析如何用词云来展示文本信息的概要。比如我们从词云百度百科截取文字,制作词云。简单来说,词云就…

到达率99.9%:闲鱼消息在高速上换引擎(集大成)

简介: 记录这一年闲鱼消息的优化之路 1. 背景 在2020年年初的时候接手了闲鱼的消息,当时的消息存在各种问题,网上的舆情也是接连不断:“闲鱼消息经常丢失”、“消息用户头像乱了”、“订单状态不对”(相信现在看文章的…

1小时打造HaaS版小小蛮驴智能车

1、认识一下小小蛮驴真面目 1.1、组件部分 HaaS100核心板 HaaS100是一款物联网场景中的标准硬件,并配套嵌入到硬件中的软件驱动及功能模块,为用户提供物联网设备高效开发服务。 HaaS100核心板有着丰富的外设接口,如下所示: 智…

Spring Boot Admin 集成诊断利器 Arthas 实践

简介: Arthas 是 Alibaba 开源的 Java 诊断工具,具有实时查看系统的运行状况;查看函数调用参数、返回值和异常;在线热更新代码;秒解决类冲突问题;定位类加载路径;生成热点;通过网页诊…

设计方案,拿来吧你!

作者:零一来源:前端印象前言大家好,我是零一,今天要跟大家聊聊开发流程中不起眼的环节——设计方案。你们可能没听过,也可能只是简单得走过过场,别划走,这非常重要!在字节&#xff0…