React 表单、处理受控表单组件、非受控组件

React 表单处理

学习目标: 能够使用受控组件的方式获取文本框

  • 使用 React 处理表单一般有两种方法
    1. 受控组件 (推荐)
    2. 非受控组件 (了解)

1. 受控表单组件

什么是受控组件? input 框自己的状态被 React 组件控制
受控组件就是被 React 的状态控制的组件
例如:将 React 的 state 与 input 框的 value 绑定在一起,由 state 的值来控制表单的值,从而保证单一数据源特性

实现步骤:
以获取文本框的值为例,受控组件的使用步骤如下:

  1. React组件的 state 中声明一个组件的状态数据
  2. 将状态数据设置为 input 标签元素的 `value`` 属性
  3. input 添加 change 事件
  4. 在事件处理程序中,通过事件对象 e 获取当前文本框的值(用户输入的值)
  5. 调用 setState 方法,将文本框的值作为 state 状态的最新值
    代码实现:
//受控组件
import React from 'react'
class InputComponent extends React.Component {state = {message: 'this is message',}inputChange = (e) => {this.setState({ message: e.target.value })}render() {return (<div><inputtype="test"value={this.state.message}onChange={this.inputChange}/>{this.state.message}</div>)}
}
function App() {return (<div><InputComponent /></div>)
}
export default App

2.非受控组件

声明是非受控组件?
非受控组件就是通过手动操作 Dom 的方式获取文本框的值,文本框的状态不受 React 组件的 state 中的状态控制,直接通过原生 Dom 获取输入框的值

实现步骤:

  1. 导入createRef函数
  2. 调用 createRef 函数,创建一个 ref 对象,存储到名为msgRef的实例属性中
  3. 为 input 添加 ref 属性,值位 msgRef
  4. 在按钮的事件处理程序中,通过 msgRef.current 即可拿到 input 对应的 Dom 元素,二其中的msgRef.current.value就是文本框的值
    代码实现:
import React, { createRef } from 'react'
class InputComponent extends React.Component {// 使用createRef产生一个存放Dom的对象容器msgRef = createRef()changeHandler = () => {console.log(this.msgRef.current.value)}render() {return (<><input type="test" ref={this.msgRef} /><button onClick={this.changeHandler}>click</button></>)}
}
function App() {return (<div><InputComponent /></div>)
}
export default App

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

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

相关文章

深度学习-Pytorch如何构建和训练模型

深度学习-Pytorch如何构建和训练模型 用pytorch如何构建模型&#xff0c;如何训练模型&#xff0c;如何测试模型&#xff1f; pytorch 目前在深度学习具有重要的地位&#xff0c;比起早先的caffe&#xff0c;tensorflow&#xff0c;keras越来越受到欢迎&#xff0c;其他的深度…

10.多柱状图(MuliBarChart)

愿你出走半生,归来仍是少年&#xff01; 环境&#xff1a;.NET 7、MAUI 话接上回&#xff08;9.单柱状图&#xff08;SingleBarChart&#xff09;&#xff09;&#xff0c;从单柱拓展到多柱状图。 1.数据设置 private void InitValue(List<BasicSerieDto> dtos){Serie…

英文阅读-LinkedIn‘s Tips for Highly Effective Code Review

LinkedIn的CR技巧 LinkedIn团队CodeReview经验与方法&#xff0c;原文来自https://thenewstack.io/linkedin-code-review/ 总结 Do I Understand the “Why”? 在提交pr的同时需要描述本次修改的“动机”&#xff0c;有助于提高代码文档质量。 Am I Giving Positive Feedbac…

openssl3.2/test/certs - 055 - all DNS-like CNs allowed by CA1, no DNS SANs

文章目录 openssl3.2/test/certs - 055 - all DNS-like CNs allowed by CA1, no DNS SANs概述笔记END openssl3.2/test/certs - 055 - all DNS-like CNs allowed by CA1, no DNS SANs 概述 openssl3.2 - 官方demo学习 - test - certs 笔记 /*! * \file D:\my_dev\my_local_…

Java转成m3u8,hls格式

Java转成m3u8,hls格式 需求分析 大致思路 循环文件夹下面所有文件判断当前文件是否是视频文件&#xff0c;如果是视频文件先转为ts文件 因为听别人说先转成ts之后再切片会快很多 转成ts文件&#xff0c;并为这些文件单独生成一个目录&#xff0c;如果目录不存在则新建一个目…

14.5 Flash查询和添加数据库数据

14.5 Flash查询和添加数据库数据 在Flash与数据库通讯的实际应用中&#xff0c;如何实现用户的登录与注册是经常遇到的一个问题。登录实际上就是ASP根据Flash提供的数据查询数据库的过程&#xff0c;而注册则是ASP将Flash提供的数据写入数据库的过程。 1.启动Access2003&…

C++Linux网络编程Day1

最简单server程序 #include <iostream>// sys&#xff08;系统&#xff09;,socket&#xff08;套接字&#xff09;&#xff0c;这个还是挺好理解的 #include <sys/socket.h>#include <arpa/inet.h>#include <stdio.h> #include <string.h>int …

项目管理的细节:屁股决定脑袋

在我刚入行的时候&#xff0c;由于我勤奋好学&#xff0c;技术上钻研得比较深入&#xff0c;我曾一度自视甚高&#xff0c;甚至有些傲慢。那时&#xff0c;我年轻气盛&#xff0c;未能充分认识到自己的不足。我曾认为领导对我的评价不公&#xff0c;未能充分认识到我的能力和价…

SpringBoot和Vue接口调用传参方式

简单总结一下常用的传参方式&#xff0c;一些前后端分离项目接口调试时经常出现传参格式错误问题。 前后端进行交互时方法一般就分为get和post&#xff0c;至于后面的delete和put都是基于post进行封装而出的。 Http请求中不同的请求方式会设置不同的Content-Type,参数的传递方…

C#,获取与设置Windows背景图片的源代码

为了满足孩子们个性化桌面的需求。 这里发布获取与设置Windows背景图片的源代码。 1 文本格式 using System; using System.IO; using System.Data; using System.Linq; using System.Text; using System.Drawing; using System.Collections; using System.Collections.Gene…

ES数据处理方法

由于日志数据存在ES项目里&#xff0c;需要从ES中获取日志进行分析&#xff0c;使用SQL数据进行处理&#xff0c;如下&#xff1a; select traceid-- STRING COMMENT 流程id, ,appnum -- BIGINT COMMENT 迭代号, ,appversion --STRING COMMENT APP版本, ,appc…

JeecgBoot集成TiDB,打造高效可靠的数据存储解决方案

TiDB简介 TiDB是PingCAP公司自主设计、研发的开源分布式关系型数据库&#xff0c;同时支持在线事务处理与在线分析处理 (Hybrid Transactional and Analytical Processing, HTAP) 的融合型分布式数据库产品&#xff0c;具备水平扩容或者缩容、金融级高可用、实时 HTAP、云原生…

【学习笔记】CF1349F2 Slime and Sequences (Hard Version)

多项式工业警告&#xff01;&#xff01;&#xff01; 点击看题意 思路来自 这位大佬 。 为什么这么好的题解没人评论。 Part 1 前置知识&#xff1a;拉格朗日反演&#xff08;多项式复合&#xff09;&#xff0c;分式域&#xff08;引入负整数次项&#xff09;。 条件&a…

基数排序算法

1. 排序算法分类 十种常见排序算法可以分为两大类&#xff1a; 比较类排序&#xff1a; 通过比较来决定元素间的相对次序&#xff0c;由于其时间复杂度不能突破O(nlogn)&#xff0c;因此也称为非线性时间比较类排序。比较类排序算法包括&#xff1a;插入排序、希尔排序、选择…

Netty接收超长TCP数据时 使用按行分隔Decoder无法正确解码的问题解决

使用Netty实现的tcp服务端&#xff0c;由于tcp是流式传输的&#xff0c;故需要选用一个解码器对流式消息进行解码和包分隔&#xff0c;以防收到不正确的包。例如LineBasedFrameDecoder&#xff0c;LengthFieldBasedFrameDecoder&#xff0c;DelimiterBasedFrameDecoder等常用解…

第139期 做大还是做小-Oracle名称哪些事(20240125)

数据库管理139期 2024-01-25 第139期 做大还是做小-Oracle名称哪些事&#xff08;20240125&#xff09;1 问题2 排查3 扩展总结 第139期 做大还是做小-Oracle名称哪些事&#xff08;20240125&#xff09; 作者&#xff1a;胖头鱼的鱼缸&#xff08;尹海文&#xff09; Oracle A…

SQL - 事务控制

SQL - 事务控制 文章目录 SQL - 事务控制TCL - 事务事务的边界事务的特性事务的应用 事务隔离等级MySQL支持四种隔离级别 TCL - 事务 **模拟场景&#xff1a;**生活当中转账是转账方账户扣钱&#xff0c;收账方账户加钱。用数据库操作来模拟现实转账。 数据库模拟&#xff1a…

CI/CD

介绍一下CI/CD CI/CD的出现改变了开发人员和测试人员发布软件的方式,从最初的瀑布模型,到最后的敏捷开发(Agile Development),再到今天的DevOps,这是现代开发人员构建出色产品的技术路线 随着DevOps的兴起,出现了持续集成,持续交付和持续部署的新方法,传统的软件开发和交付方…

软件设计师——软件工程(五)

&#x1f4d1;前言 本文主要是【软件工程】——软件设计师——软件工程的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304…

安全防御综合组网实验

题目 要求 生产区在工作时间可以访问服务器区&#xff0c;仅可以访问http服务器。办公区全天可以访问服务器区&#xff0c;其中10.0.2.20 可以访问FTP服务器和http服务器。10.0.2.10仅可以ping通10.0.3.10。办公区在访问服务器区时采用匿名认证的方式进行上网行为管理。办公区…