React之数据绑定以及表单处理
一、表单元素
像<input>、<textarea>、<option>这样的表单元素不同于其他元素，因为他们可以通过用户交互发生变化。这些元素提供的界面使响应用户交互的表单数据处理更加容易
交互属性，用户对一下元素交互时通过onChange回调函数来监听组件变化。表单元素支持几个受用户交互影响的属性：
value用于<input>、<textarea>
checked用于<checkbox>、<radio>
selected用于<option>
二、受限组件和不受限组件
1.受限组件与双向数据绑定
受限组件：设置了value的<input>是一个受限组件，对于受限的<input>，渲染出来HTML元素始终保持value属性的值，此时用户在渲染出来的组件里输入任何值都不起作用
写一个完整的表单元素的实例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>受限组件和双向绑定</title><script src="../js/react.development.js "></script><script src="../js/react-dom.development.js"></script><!-- 用于解析babel --><script src="../js/babel.min.js"></script>
</head><body><div id="hello"></div><div id="hello2"></div><script type="text/babel">//受限组件,他的class Hello extends React.Component{render(){return <div><input type="text" value='123'/><hr/></div>}}ReactDOM.render(<Hello />,document.getElementById('hello'))//双向数据绑定class Hello2 extends React.Component{state = {value:'12345'}//valueChange = (e)=>{this.setState({value:e.target.value})}render(){return <div><input type="text" value={this.state.value} onChange={this.valueChange}/><p>{this.state.value}</p></div>}}ReactDOM.render(<Hello2 />,document.getElementById('hello2'))</script><!-- radio、checkbox、textarea、select --><hr/><div id="root1"></div><script type="text/babel">//表单元素的双向绑定class Rtx extends React.Component{state = {//单选按钮radioValue:'',//check选中的checkArr:[],//文本域的valuetextareaValue:'',selectArr: ['北京','上海','湖北','广东'],//select选中的地址address:''}//radioChange = (e)=>{this.setState({radioValue:e.target.value})}checkboxChange =(e)=>{//由于组件继承的是purecomponent,因此要将数组复制一次let _checkArr = [...this.state.checkArr]if (e.target.checked) {//将所有选中的复选框的value值，push到一个数组（checkArr）中_checkArr.push(e.target.value)} else {//若取消选中，则将其从checkArr中减掉_checkArr.splice(this.state.checkArr.indexOf(e.target.value), 1)}//利用setState更新checkArrthis.setState({checkArr:_checkArr})}textareaChange=(e)=>{this.setState({textareaValue:e.target.value})}selectChange=(e)=>{this.setState({address:e.target.value})}submit =()=>{console.log(this.state);}render(){let checkInfo=["c1",'c2']let {radioValue,checkArr,textareaValue,selectArr,address } =this.statelet {checkboxChange} =thisreturn <div><div>性别：男<input type="radio" value='man' checked={radioValue=='man'?true:false} onChange={this.radioChange}/>女<input type="radio" value='woman' checked={radioValue=='woman'?true:false} onChange={this.radioChange}/></div><div>{checkInfo.map(function(item,index){return <span>{item}<input type="checkbox" name='box' value={item} key={index} onChange={checkboxChange} checked={checkArr.indexOf(item)!==-1}></input></span> })}</div><div><textarea name="" id="" value={textareaValue} cols="30" rows="10" onChange={this.textareaChange}></textarea></div><div>地址:<select value={address} name="address" onChange={this.selectChange}>{selectArr.map(function(item,index){return <option key={index}>{item}</option>})}</select> </div><button disabled={!radioValue || !address || !checkArr || !textareaValue } onClick={()=>this.submit()}>提交</button></div>}}ReactDOM.render(<Rtx />,document.getElementById('root1'))</script><!-- radio、
</body></html>2.不受限组件
不受限组件： 没有设置value（或者设为null）的input组件是一个不受限组件。杜宇不受限的input组件，渲染出来的元素直接反映用户输入
使用defaultValue属性不使用value可以实现不受限组件的双向数据
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>非受限组件</title><script src="../js/react.development.js "></script><script src="../js/react-dom.development.js"></script><!-- 用于解析babel --><script src="../js/babel.min.js"></script>
</head><body><div id="root1"></div><script type="text/babel">//非受限组件class Rtx extends React.Component {state = {value: '123'}valueChange = (e) => {this.setState({ value: e.target.value })console.log(this.state.value);}render() {return <div><div><input type="text" /><input type="text" defaultValue={this.state.value} onChange={this.valueChange} /><p>{this.state.value}</p></div><div>性别：男<input type="radio" name='sex' value='man' />女<input type="radio" name='sex' value='woman' /></div></div>}}ReactDOM.render(<Rtx />, document.getElementById('root1'))</script><!-- radio、checkbox、textarea、select --><div id="root1"></div><script type="text/babel">//表单元素的双向绑定class Rtx extends React.Component {state = {//单选按钮radioValue: '',//check选中的checkArr: [],//文本域的valuetextareaValue: '',selectArr: ['北京', '上海', '湖北', '广东'],//select选中的地址address: ''}//radioChange = (e) => {this.setState({ radioValue: e.target.value })}checkboxChange = (e) => {//由于组件继承的是purecomponent,因此要将数组复制一次let _checkArr = [...this.state.checkArr]if (e.target.checked) {//将所有选中的复选框的value值，push到一个数组（checkArr）中_checkArr.push(e.target.value)} else {//若取消选中，则将其从checkArr中减掉_checkArr.splice(this.state.checkArr.indexOf(e.target.value), 1)}//利用setState更新checkArrthis.setState({checkArr: _checkArr})}textareaChange = (e) => {this.setState({ textareaValue: e.target.value })}selectChange = (e) => {this.setState({ address: e.target.value })}submit = () => {console.log(this.state);}render() {let checkInfo = ["c1", 'c2']let { radioValue, checkArr, textareaValue, selectArr, address } = this.statelet { checkboxChange } = thisreturn <div><div>性别：男<input type="radio" defaultValue='man' checked={radioValue == 'man' ? true : false} onChange={this.radioChange} />女<input type="radio" defaultValue='woman' checked={radioValue == 'woman' ? true : false} onChange={this.radioChange} /></div><div>{checkInfo.map(function (item, index) {return <span>{item}<input type="checkbox" name='box' defaultValue={item} key={index}onChange={checkboxChange}checked={checkArr.indexOf(item) !== -1}></input></span>})}</div><div><textarea name="" id="" value={textareaValue} cols="30" rows="10" onChange={this.textareaChange}></textarea></div><div>地址:<select defaultValue={address} name="address" onChange={this.selectChange}>{selectArr.map(function (item, index) {return <option key={index}>{item}</option>})}</select></div><button disabled={!radioValue || !address || !checkArr || !textareaValue} onClick={() => this.submit()}>提交</button></div>}}ReactDOM.render(<Rtx />, document.getElementById('root1'))</script>
</body></html>三、常用表单数据绑定
对相同逻辑的表单change事件进行封装
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单提交</title><script src="../js/react.development.js "></script><script src="../js/react-dom.development.js"></script><!-- 用于解析babel --><script src="../js/babel.min.js"></script>
</head><body><div id="root1"></div><script type="text/babel">//非受限组件class Rtx extends React.Component {state = {name: 'fxt',sex:'1',address:'上海',textareaValue:'hello world'}//我们发现下面获得改变值的方法都是一样的，所以对一样的逻辑函数进行封装handleChange=(e)=>{console.log(e.target.name);let key = e.target.namethis.setState({[key]:e.target.value})// this.setState({[e.target.name]:e.target.value})}// getName=(e)=>{// this.setState({name:e.target.value})// }// getSex=(e)=>{// this.setState({sex:e.target.value})// }getAddress=(e)=>{this.setState({address:e.target.value})}getTextareaValue=(e)=>{this.setState({textareaValue:e.target.value})}submit = (e) => {// e.preventDefault();alert(JSON.stringify(this.state))}render() {let selectArr=['北京', '上海', '湖北', '广东']let {name,sex,address,textareaValue}=this.statereturn <div><form action=""><label for="">姓名：<input type="text" name='name' defaultValue={name} onChange={this.handleChange}/></label> <label for=""><div>性别：<input type="radio" name="sex" value='1' defaultChecked={sex==1? true:false} id="" onChange={this.handleChange}/>男<input type="radio" name="sex" value='2' defaultChecked={sex==2? true:false} id="" onChange={this.handleChange}/>女</div></label> <label for=""><div>地址:<select defaultValue={address} name="address" onChange={this.getAddress}>{selectArr.map( (item, index) =>{return <option key={index}>{item}</option>})}</select></div></label><label for=""><div>备注：<textarea name="" id="" defaultValue={textareaValue} cols="30" rows="10" onChange={this.getTextareaValue}></textarea> </div></label><button disabled={!name || !address || !textareaValue || !sex} onClick={()=>{this.submit()} }>提交</button></form></div>}}ReactDOM.render(<Rtx />, document.getElementById('root1'))</script>
</body></html>四、注册功能实现
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册表单验证</title><script src="../js/react.development.js "></script><script src="../js/react-dom.development.js"></script><!-- 用于解析babel --><script src="../js/babel.min.js"></script><style>.error{color: red;}</style>
</head><body><div id="root1"></div><script type="text/babel">//非受限组件class Rtx extends React.Component {state = {name: '',nameError:"",passworld:'',passworldError:'',sex:'1',phone:'',phoneError:'',city:'北京',textareaValue:'hello world'}//单独写校验规则的nameChange=(e)=>{let rule= /^[\w-]{4,10}$/ let value=e.target.valuelet error=''if(!value){error='请输入昵称'}else if(!rule.test(value)){error='请输入4-10位的昵称'}else{error=''}this.setState({name:value,nameError:error})}//进行校验的表单元素统一封装handleTest=(e)=>{let ruleArr={passworld:{rule:new RegExp(/^\S*(?=\S{6,12})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/),text:'密码',error:'6-12位，至少包括一个大小写字母、数字、特殊字符'},phone:{rule:new RegExp(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/),text:'手机号',error:'请输入正确的手机号'}}let value=e.target.valuelet key = e.target.namelet ruleInfo={}let error=''Object.keys(ruleArr).map((el)=>{if(el==key){ruleInfo=ruleArr[key]}})if(!value){error='请输入'+ruleInfo.text}else if(!ruleInfo.rule.test(value)){error=ruleInfo.error}else{error=''}this.setState({[key]:value,[key+'Error']:error})}//不进行校验的表单通过自定义属性实现获得要设置的值的key键handleChange=(e)=>{console.log(e.target.name);let key = e.target.namethis.setState({[key]:e.target.value})// this.setState({[e.target.name]:e.target.value})}//提交想提交值submit = (e) => {e.preventDefault()//阻止默事件let {name,passworld,sex,phone,city,textareaValue} =this.statelet data={name,passworld,sex,phone,city,textareaValue}alert(JSON.stringify(data))}render() {let selectArr=[{id:1,text:'北京'},{id:2,text: '上海'}, {id:3,text:'湖北'}]let {name,nameError,passworld,passworldError,sex,phone,phoneError,city,textareaValue}=this.statereturn <div><form action=""><label for="">昵称：<input type="text" name='name' defaultValue={name} onChange={this.nameChange}/><span className='error'> * {nameError}</span></label> <label for=""><div>密码：<input type="text" name='passworld' defaultValue={passworld} onChange={this.handleTest}/><span className='error'> * {passworldError}</span></div></label> <label for=""><div>性别：<input type="radio" name="sex" value='1' defaultChecked={sex==1? true:false} id="" onChange={this.handleChange}/>男<input type="radio" name="sex" value='2' defaultChecked={sex==2? true:false} id="" onChange={this.handleChange}/>女</div></label> <label for="">手机号：<input type="text" name='phone' defaultValue={phone} onChange={this.handleTest}/><span className='error'> * {phoneError}</span> </label> <label for=""><div>城市:<select defaultValue={city} name="city" onChange={this.handleChange}>{selectArr.map( (item, index) =>{return <option value={item.id} key={index}>{item.text}</option>})}</select></div></label><label for=""><div>备注：<textarea name="textareaValue" id="" defaultValue={textareaValue} cols="30" rows="10" onChange={this.handleChange}></textarea> </div></label><button disabled={!name || nameError|| !passworld || passworldError|| !sex || !phone ||phoneError || !city ||!textareaValue } onClick={this.submit }>提交</button></form></div>}}ReactDOM.render(<Rtx />, document.getElementById('root1'))</script>
</body></html>相关文章：
React之数据绑定以及表单处理
一、表单元素 像<input>、<textarea>、<option>这样的表单元素不同于其他元素，因为他们可以通过用户交互发生变化。这些元素提供的界面使响应用户交互的表单数据处理更加容易 交互属性，用户对一下元素交互时通过onChange回调函数来监听…...
Siamrpn++论文中文翻译（详细！）
SiamRPN: Evolution of Siamese Visual Tracking with Very Deep Networks SiamRPN：具有非常深度网络的Siamese视觉跟踪的进化 【siamrpn论文地址】 https://arxiv.org/abs/1812.11703 摘要 基于Siamese网络的跟踪器将跟踪表示为目标模板和搜索区域之间的卷积特征…...
第一篇【传奇开心果系列】Python的自动化办公库技术点案例示例：深度解读Pandas库
传奇开心果博文系列 系列博文目录Python的自动化办公库技术点案例示例系列 博文目录前言一、主要特点和功能介绍二、Series 示例代码三、DataFrame示例代码四、数据导入/导出示例代码五、数据清洗示例代码六、数据选择和过滤示例代码七、数据合并和连接示例代码八、数据分组和聚…...
基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的停车位检测系统（Python+PySide6界面+训练代码）
摘要：开发停车位检测系统对于优化停车资源管理和提升用户体验至关重要。本篇博客详细介绍了如何利用深度学习构建一个停车位检测系统，并提供了完整的实现代码。该系统基于强大的YOLOv8算法，并结合了YOLOv7、YOLOv6、YOLOv5的性能对比…...
状态模式（State Pattern）
定义 状态模式（State Pattern）是一种行为设计模式，它允许对象在其内部状态改变时改变其行为。这意味着，当对象的状态发生变化时，它的行为也会发生变化。状态模式特别适用于行为依赖于其状态的对象，而且当这…...
js之版本号排序
版本号排序 给定一个由版本号组成的数组，按照版本号由小到大排序 假如版本号如下 ： ["0.1.1", "2.3.3", "0.302.1", "4.2", "4.3.5", "4.3.4.5"];原理很简单，通过自定义sort排…...
考取ORACLE数据库OCP的必要性 Oracle数据库
OCP证书是什么？ OCP，全称Oracle Certified Professional，是Oracle公司的Oracle数据库DBA（Database Administrator，数据库管理员)认证课程。这是Oracle公司针对数据库管理领域设立的一项认证课程，旨在评估和…...
WordPress通过宝塔面板的入门安装教程【保姆级】
WordPress安装教程【保姆级】【宝塔面板】 前言一：安装环境二：提前准备三：域名解析四：开始安装五：安装成功 前言 此教程适合新手，即使不懂代码，也可轻松安装wordpress 一：安装环…...
Leetcoder Day25｜ 回溯part05：子集+排列
491.递增子序列 给定一个整型数组, 你的任务是找到所有该数组的递增子序列，递增子序列的长度至少是2。 示例: 输入:[4, 7, 6, 7]输出: [[4, 6], [4, 7], [4, 6, 7], [6, 7], [7,7], [4,7,7]] 说明: 给定数组的长度不会超过15。数组中的整数范围是 [-100,100]。给定数…...
【HTML】HTML基础5（特殊字符）
目录 特殊字符的作用 常用的特殊字符 使用效果 特殊字符的作用 例如 当我在两个文字间打出空格时 <p>“银河护卫队”系列 在漫威电影宇宙中一直是异数般的存在，不仅因为影片主角是一群反英雄，<strong>与超级英雄相比显得格格不入<…...
MacBook将iPad和iPhone备份到移动硬盘
#创作灵感# 一个是ICloud不够用，想备份到本地；然而本地存储不够用，增加容量巨贵，舍不得这个钱，所以就想着能不能备份到移动硬盘。刚好有个移动固态，所以就试了一下，还真可以。 #正文# 说一下逻…...
贪心 Leetcode 376 摆动序列
摆动序列 Leetcode 376 学习记录自代码随想录 如果连续数字之间的差严格地在正数和负数之间交替，则数字序列称为 摆动序列 。第一个差（如果存在的话）可能是正数或负数。仅有一个元素或者含两个不等元素的序列也视作摆动序列。 例如&#…...
蓝桥杯（3.1）
92. 递归实现指数型枚举 import java.util.Scanner;public class Main {static int N 16;static int n;static int[] st new int[N]; public static void dfs(int u) {if(u > n) {for(int i1;i<n;i) {if(st[i] 1)System.out.print(i" ");}System.out.print…...
像用Excel一样用Python：pandasGUI
文章目录 启动数据导入绘图 启动 众所周知，pandas是Python中著名的数据挖掘模块，以处理表格数据著称，并且具备一定的可视化能力。而pandasGUI则为pandas打造了一个友好的交互窗口，有了这个，就可以像使用Excel一样使用…...
C#面：Application , Cookie 和 Session 会话有什么不同
Application、Cookie 和 Session 是在Web开发中常用的三种会话管理方式 Application（应用程序）： Application 是在服务器端保存数据的一种方式，它可以在整个应用程序的生命周期内共享数据。Application 对象是在应用程序启动时创…...
BUUCTF---数据包中的线索1
1.题目描述 2.下载附件，是一个.pcap文件 3.放在wireshark中，仔细观察数据流，会发现有个叫fenxi.php的数据流 4.这条数据流是http,且使用GET方式，接下来我们使用http.request,methodGET 命令来过滤数据流 5.在分析栏中我们追踪htt…...
【数仓】kafka软件安装及集群配置
相关文章 【数仓】基本概念、知识普及、核心技术【数仓】数据分层概念以及相关逻辑【数仓】Hadoop软件安装及使用（集群配置）【数仓】Hadoop集群配置常用参数说明【数仓】zookeeper软件安装及集群配置 一、环境准备 准备3台虚拟机 Hadoop131ÿ…...
代码随想录 二叉树第三周
目录 404.左叶子之和 513.找树左下角的值 112.路径总和 106.从中序与后序遍历构造二叉树 105.从前序与中序遍历序列构造二叉树 654.最大二叉树 404.左叶子之和 404. 左叶子之和 简单 给定二叉树的根节点 root ，返回所有左叶子之和。 示例 1： 输…...
flask流式输出-SSE服务
一、定义 flask demo前端遇到的问题 二、实现 flask demo from gevent import monkey monkey.patch_all() #并行 import time from flask import Response, stream_with_context from flask import Flask from gevent.pywsgi import WSGIServer from flask import …...
注解整理ing
注解 1. 实体类注解 Data注解是lombok.jar包下的注解，该注解通常用在实体bean上，不需要写出set和get方法 Data相当于Getter Setter RequiredArgsConstructor ToString EqualsAndHashCode这5个注解的合集 EqualsAndHashCode注解会生成equals(Object oth…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？
Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
SpringTask-03.入门案例
一.入门案例 启动类： package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。 方法一：使用 XML 的 <foreach> 标签ÿ…...
加密通信 + 行为分析：运营商行业安全防御体系重构
在数字经济蓬勃发展的时代，运营商作为信息通信网络的核心枢纽，承载着海量用户数据与关键业务传输，其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级，传统安全防护体系逐渐暴露出局限性&a…...
用神经网络读懂你的“心情”：揭秘情绪识别系统背后的AI魔法
用神经网络读懂你的“心情”：揭秘情绪识别系统背后的AI魔法 大家好，我是Echo_Wish。最近刷短视频、看直播，有没有发现，越来越多的应用都开始“懂你”了——它们能感知你的情绪，推荐更合适的内容，甚至帮客服识别用户情绪，提升服务体验。这背后，神经网络在悄悄发力，撑起…...
leetcode_69.x的平方根
题目如下 ： 看到题 ，我们最原始的想法就是暴力解决: for(long long i 0;i<INT_MAX;i){if(i*ix){return i;}else if((i*i>x)&&((i-1)*(i-1)<x)){return i-1;}}我们直接开始遍历，我们是整数的平方根，所以我们分两…...
高端性能封装正在突破性能壁垒，其芯片集成技术助力人工智能革命。
2024 年，高端封装市场规模为 80 亿美元，预计到 2030 年将超过 280 亿美元，2024-2030 年复合年增长率为 23%。 细分到各个终端市场，最大的高端性能封装市场是“电信和基础设施”，2024 年该市场创造了超过 67% 的收入。…...
理想汽车5月交付40856辆，同比增长16.7%
6月1日，理想汽车官方宣布，5月交付新车40856辆，同比增长16.7%。截至2025年5月31日，理想汽车历史累计交付量为1301531辆。 官方表示，理想L系列智能焕新版在5月正式发布，全系产品力有显著的提升，每…...