基于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 相关文章推荐
parentElement,srcElement的使用小结
Jan 13 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
SVG描边动画
Feb 23 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
JS async 函数的含义和用法实例总结
Apr 08 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超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
Smarty变量用法详解
2016/05/11 PHP
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
深入理解Python3中的http.client模块
2017/03/29 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
基于python历史天气采集的分析
2019/02/14 Python
python实现按首字母分类查找功能
2019/10/31 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
numpy库reshape用法详解
2020/04/19 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
Django url 路由匹配过程详解
2021/01/22 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
服务行业个人求职的自我评价
2013/12/12 职场文书
党性观念心得体会
2014/09/03 职场文书
代办社保委托书范文
2014/10/06 职场文书
赤壁观后感(2)
2015/06/15 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL