基于React实现表单数据的添加和删除详解


Posted in Javascript onMarch 14, 2017

前言

最近在学习React,做了一个简单的Demo,用以自勉及和有需要的朋友们参考学习。

实现功能

在输入框中输入数据后,点击保存按钮,数据将会逐一显示在输入框下方,点击保存后显示的任何一条数据,该数据即可被删除。

实现思路

在开始实现之前,我们需要理清我们的思路,这样才能更好地去完成预定功能。

  1. 点击保存按钮时,输入框中的数据读取,可通过onChange绑定事件,获得输入框数据:e.target.value
  2. 自定义一个事件,输入数据后,点击保存按钮时,数据的存储操作交由该事件完成
  3. 当不断点击保存按钮时,数据应该是多个的,可选用数组来存储数据
  4. 数组中,数组的索引是唯一表示一个数据的方式,数据的操作可通过索引进行

实现过程

class ReactDemo extends React.Component{
 render(){
 return(
  <div>
  <input />
  <button>点击保存</button>
  </div>
 )
 }
}
ReactDOM.render(<ReactDemo />,document.getElementById('app'))

这是本次Demo的雏形,接下来我们将会在这上面一点一点地做修改,进行功能的完善。

此时,表单为非受控组件,也就是普通的组件,在输入框中输入任何数据,在输入框内均会显示。

React组件提供了this.state以及this.setState,利用它们,我们可以十分方便地管理、更新组件的状态。

constructor() {
 super()
 this.state = {
  val: '',
  arr: []
 }
 }

this.state通常在构造函数内部进行初始化,其值为对象,本例中,val用于保存输入框中的值,初始值为空字符串;arr是个数据,用于存储多个数据。

handleData(e) {
 this.setState({
  val: e.target.value
 })
 }

这里,this.setState会将val的值更新为e.target.value,当组件状态值(这里为val)发生改变,组件就会自动调用render()重新渲染UI 。

onButtonClick(e) {
  var val = this.state.val
  this.setState({
  arr: [val, ...this.state.arr]
  })
 }

展开运算符(…)是ES6的语法,它允许一个表达式在某处展开,利用这一特性,可将数组元素逐一展开:...this.state.arr,让val总是成作为数组的第一个元素,组成新数组[val, ...this.state.arr]后,赋给arr。

onDelete(index, e) {
 this.setState({
  arr: this.state.arr.filter((elem, i) => index !== i)
 })
 }

通过数组的索引对数据进行删除操作, [].filter()接受一个方法作为它的参数,并返回匹配条件(index !== i)的元素组成的新数组。

{arr1.map((i,index) =>(
 <div onClick={this.onDelete.bind(this,index)}>{i}</div>
 ))}

这种JSX的语法是由facebook官方提出的一种十分简明的写法,个人觉得好用到爆。[].map()对数组元素依次进行函数的调用,并返回函数调用结果组成的新数组。bind(this,index)的第二个参数index为原函数onDelete(index,e)省略掉的第一个参数。

好了,大功告成,让我们一起来看下效果吧…

基于React实现表单数据的添加和删除详解

添加效果

基于React实现表单数据的添加和删除详解

删除后效果

总结

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
javascript 变量作用域 代码分析
Jun 26 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 #Javascript
JS检测数组类型的方法小结
Mar 14 #Javascript
轻松理解JavaScript闭包
Mar 14 #Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 #Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 #Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 #Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 #Javascript
You might like
生成静态页面的PHP类
2006/07/15 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
许愿墙中用到的函数
2006/10/07 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Python实现SVN的目录周期性备份实例
2015/07/17 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
超市5.1促销活动
2014/01/15 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
国庆节演讲稿
2014/05/27 职场文书
服装设计专业自荐信
2014/06/17 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
Python的这些库,你知道多少?
2021/06/09 Python
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python