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>

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

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

相关文章

回溯例题（leetcode17/37）

回溯例题（leetcode17/37）

文章目录 leetcode37leetcode17 回溯跟枚举差不多。要注意“回溯”&#xff0c;别忘记“回”之前把之前的改动都复原。 leetcode37 leetcode37是解数独问题。本题保证有且仅有唯一解。 思路&#xff1a;先把空格子的位置存下来&#xff0c;然后对每一个空位置挨个枚举1-9。枚…
阅读更多...
Excel常用公式总结非常实用

Excel常用公式总结非常实用

16个最实用的Excel万能公式 1、多条件判断 IF(And(条件1,条件2..条件N),条件成立返回值) IF(or(条件1,条件2..条件N),条件成立返回值) 2、多条件查找 Lookup(1,0/((条件1*条件2*...条件N)),返回值区域&#xff09; 3、多条件求和 Sumifs(值区域,判断区域1,条件1,判断区域2,条…
阅读更多...
2024最新精华版Java面试题之spring篇

2024最新精华版Java面试题之spring篇

目录 一、Java面试题之spring篇 1、什么是spring? 2、你们项目中为什么使用Spring框架&#xff1f; 3、 Autowired和Resource关键字的区别&#xff1f; 4、依赖注入的方式有几种&#xff0c;各是什么? 5、讲一下什么是Spring容器&#xff1f; 6、说说你对Spring MVC的理…
阅读更多...
Java毕业设计-基于springboot开发的私人健身与教练预约系统-毕业论文+答辩PPT（有源代码）

Java毕业设计-基于springboot开发的私人健身与教练预约系统-毕业论文+答辩PPT（有源代码）

文章目录 前言一、毕设成果演示&#xff08;源代码在文末&#xff09;二、毕设摘要展示1.开发说明2.需求分析3、系统功能结构 三、系统实现展示1、系统功能模块2、后台功能模块2.1管理员功能2.2用户功能2.3教练功能 四、毕设内容和源代码获取总结 [Java毕业设计-基于springboot…
阅读更多...
简单数据类型和复杂数据类型

简单数据类型和复杂数据类型

1. 简单数据类型 null是个特例: 2. 复杂数据类型 3. 堆和栈 注意&#xff1a; JavaScript 中是没有堆和栈的概念的&#xff0c;通过堆栈的概念可以更好的理解代码的一些执行方式&#xff0c;便于将来学习其他语言。 4. 简单数据类型传参 总结&#xff1a;简单数据类型传参传…
阅读更多...
在线ai写作，让你随时随地创作优质内容

在线ai写作，让你随时随地创作优质内容

如今的ai技术已经渗透到我们生活的方方面面。其中&#xff0c;AI写作成为了一个备受关注的领域。如今&#xff0c;我们可以利用在线ai写作在任何时间、任何地点创作出优质的内容。 传统的写作过程需要大量的时间和精力。从构思到写作再到修改&#xff0c;每一个环节都需要我们投…
阅读更多...
Linux进程管理——top字段

Linux进程管理——top字段

目录 1.top下半部分——进程状态 2.top常用内部命令 3.top指定 ①top ②top -d 1 ③top -d 1 -p 10126 ④top -d 1 -p 10126,1 4.使用信号控制进程 1.top下半部分——进程状态 PID&#xff1a;进程号 User&#xff1a;用户 PR/NI&#xff1a;优先级 VIRT&#xff08…
阅读更多...
国产软件很流氓？不，这些国产软件良心且实用，别让它们寒心

国产软件很流氓？不，这些国产软件良心且实用，别让它们寒心

谈及国产软件&#xff0c;人们常将其与“流氓、捆绑、满屏广告”等负面词汇挂钩。但真实情况是&#xff0c;仍有许多优质国产软件在默默耕耘&#xff0c;它们既免费又实用&#xff0c;别让它们寒了心。 1、Dism Dism是一款专为Windows系统设计的管理优化神器&#xff0c;其开…
阅读更多...
呦呵，阿里云果然是良心云

呦呵，阿里云果然是良心云

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 你听说了吗?阿里云全线降价20%&#xff0c;还上了热搜。2024年一开年&#xff0c;看来阿里云杀红了眼&#xff0c;云市场即将变天。 现在续费的阿里云主机&#xff0c;续费三年和续费两年的价钱差不多&#xff0…
阅读更多...
更先进的功能，无注意力大模型Eagle7B：基于RWKV，推理成本降低10-100 倍，另一个工具包使得大模型推理性能加速达40倍（附详细代码使用举例）

更先进的功能，无注意力大模型Eagle7B：基于RWKV，推理成本降低10-100 倍，另一个工具包使得大模型推理性能加速达40倍（附详细代码使用举例）

更先进的功能，无注意力大模型Eagle7B：基于RWKV，推理成本降低10-100 倍，另一个工具包使得大模型推理性能加速达40倍（附详细代码使用举例）。 在 AI 赛道中，与动辄上千亿参数的模型相比，最近，小模型开始受到大家的青睐。比如法国 AI 初创公司发布的 Mistral-7B 模型，其…
阅读更多...
摄像头工程师说 Camera - 颜色空间 YUV 与 YCbCr 的区别与联系（4）

摄像头工程师说 Camera - 颜色空间 YUV 与 YCbCr 的区别与联系（4）

摄像头工程师说 Camera - 数据格式 YUV 与 YCbCr 的区别与联系&#xff08;4&#xff09; 概述 上回书咱们说到 摄像头工程师说 Camera - 数据格式 YUV 格式的存储&#xff08;3&#xff09; 本节咱们说说YUV 与 YCbCr 两种色彩空间定义的联系与区别。 相同点&#xff1a; Y…
阅读更多...
MySQL基础（三）

MySQL基础（三）

文章目录 MySQL基础&#xff08;三&#xff09;1. 多表查询1.1 概述1.1.1 数据准备1.1.2 介绍1.1.3 分类 1.2 内连接1.3 外连接1.4 子查询1.4.1 介绍1.4.2 标量子查询1.4.3 列子查询1.4.4 行子查询1.4.5 表子查询 1.5 案例 2. 事务2.1 介绍2.2 操作2.3 四大特性 3. 索引3.1 介绍…
阅读更多...
Java-常用集合

Java-常用集合

Jva常用集合 一、Java 集合框架体系二、Collection接口和方法1. List接口List 接口主要实现类&#xff1a;ArrayListList 的实现类之二&#xff1a;LinkedListList 的实现类之三&#xff1a;Vector 2. Set接口Set 主要实现类&#xff1a;HashSetSet 实现类之二&#xff1a;Link…
阅读更多...
HCIA-Datacom实验指导手册：7 构建简单 IPv6 网络

HCIA-Datacom实验指导手册：7 构建简单 IPv6 网络

HCIA-Datacom实验指导手册&#xff1a;7 构建简单 IPv6 网络 一、实验介绍&#xff1a;二、实验拓扑&#xff1a;三、实验目的&#xff1a;四、配置步骤&#xff1a;步骤 1 设备基础配置设备命名 步骤 2 配置设备及接口 IPv6 功能步骤 3 配置接口的 link-local 地址&#xff0c…
阅读更多...
《C++进阶--10.多态》

《C++进阶--10.多态》

目录 10. 多态 10.1 多态的基本概念 10.2 多态案例一-计算器类 10.3 纯虚函数和抽象类 10.4 多态案例二-制作饮品 10.5 虚析构和纯虚析构 10.6 多态案例三-电脑组装 10. 多态 10.1 多态的基本概念 多态是C面向对象三大特性之一 多态分为两类 静态多态: 函数重载 和 运算…
阅读更多...
全网爆火的 MBTI 测试，是隐藏的割韭菜工具？

全网爆火的 MBTI 测试，是隐藏的割韭菜工具？

小伙伴们&#xff0c;谁能想到&#xff0c;作为一名冲浪老手&#xff0c;果子在网上又被骗了。 事情是这样的&#xff0c;前几天&#xff0c;我刷微博&#xff0c;看到一个推荐&#xff0c;大概如下图&#xff0c;是一个 MBTI 人格测试。 MBTI 测试&#xff0c;果子早就做过了…
阅读更多...
UCSF DOCK 分子对接详细案例（01）- rigid, fixed anchor, flexible dock

UCSF DOCK 分子对接详细案例（01）- rigid, fixed anchor, flexible dock

欢迎浏览我的CSND博客&#xff01; Blockbuater_drug …点击进入 文章目录 前言一、操作环境二、研究背景三、受体-配体结构文件准备3.1准备文件夹DOCK_workdir, 下载晶体结构3.1.1 来自湿实验的受体配体共晶结构&#xff1a;3.1.2 来自深度学习和语言模型推理预测的蛋白结构&a…
阅读更多...
Spring Boot整合Kafka

Spring Boot整合Kafka

文章目录 1. 介绍2. Kafka基础2.1. 安装KafKakafka集群搭建_kafka交流群-CSDN博客 3. Spring Boot整合Kafka3.1. 引入Kafka依赖3.2.编写配置文件 4. 生产者&#xff08;produced&#xff09;4.1. 生产者基础案例(基础测试) 5. 消费者5.1.消费者基本案例(基础测试) 6.Kafka常用配…
阅读更多...
【LLM RAG】GritLM：统一嵌入和生成的大语言模型浅谈

【LLM RAG】GritLM：统一嵌入和生成的大语言模型浅谈

前言 目前&#xff0c;所有基于文本的语言问题都可以归结为生成问题&#xff0c;并通过单一的LLM来处理。然而&#xff0c;使用嵌入的任务&#xff08;如聚类或检索&#xff09;在这种视角下往往被忽视了。文本嵌入在许多关键的实际应用中扮演着重要角色。如RAG&#xff0c;在…
阅读更多...
AIGC下一步：如何用AI再度重构或优化媒体处理？

AIGC下一步：如何用AI再度重构或优化媒体处理？

让媒资中“沉默的大多数”再次焕发光彩。 邹娟&#xff5c;演讲者 编者按 AIGC时代下&#xff0c;媒体内容生产领域随着AI的出现也涌现出更多的变化与挑战。面对AI的巨大冲击&#xff0c;如何优化或重构媒体内容生产技术架构&#xff1f;在多样的应用场景中媒体内容生产技术又…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023