使用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,一经查实,立即删除!

相关文章

可信赖的服务器监控系统,可信赖的网络监控系统,源于专业和专注.PDF

可信赖的网络监控系统,源于专业和专注.PDF可信赖的网络监控系统,源于专业和专注中科网警IT 运维系统监测器详解20 12.07可信赖的网络监控系统,源于专业和专注目录前言 4使用许可证错误!未定义书签。约定 41 监测器说明 52 监测器类型详解 52.1 网络监测器…

压测场景下的 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()方法返回对象(字符、列表、元组等)长度或项目个数。每个字符一…

psftp上传文件到服务器,使用PsFtp将文件上传到FTP Powershell

我在这个问题上一直在抨击我的大脑,似乎无法修复它。我正在尝试使用PSFTP将文件上传到FTP。我正在使用的脚本:#------------------------------------------------------#local variables$ftp_server "SERVERNAME"$ftp_path "/FTPPATH/…

Arthas 使用的各类方式

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

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

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

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

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

阿里新晋 CNCF TOC 委员张磊:“云原生”为什么对云计算生态充满吸引力?

简介: 美国当地时间 2021 年 2 月 2 日,全球顶级开源社区云原生计算基金会(Cloud Native Computing Foundation,简称 CNCF)正式宣布其新一届技术监督委员会(Technical Oversight Committee,简称 TOC)席位改选结果。阿里云高级技术…

王者荣耀服务器未响应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是如何工作的&…

爱奇艺体育:体验Serverless极致扩缩容,资源利用率提升40%

简介: Serverless 应用引擎 SAE 是面向应用的 Serverless PaaS平台,提供了效率更高、成本更优的一站式应用托管方案。零门槛零改造零容器基础,即享ServerlessK8s微服务带来的技术红利。爱奇艺通过使用 SAE 解决了体育直播面临的痛点&#xff…

怎么用python读取EXCEL表格第3行内容?

要使用Python读取Excel表格中的数据并输出第3行的内容,你可以使用pandas库。下面是一个简单的示例代码: python import pandas as pd # 读取Excel文件 df pd.read_excel(文件名.xlsx) # 输出第3行的内容 print(df.iloc[2]) 在上面的代码中&#xff0…

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…