基于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 相关文章推荐
javascript 面向对象编程基础 多态
Aug 21 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
vue.js实现简单购物车功能
May 30 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实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
php操作mongoDB实例分析
2014/12/29 PHP
PHP异常处理Exception类
2015/12/11 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
纯js实现背景图片切换效果代码
2010/11/14 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
Python模块结构与布局操作方法实例分析
2017/07/24 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
如何通过python实现人脸识别验证
2020/01/17 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
python eventlet绿化和patch原理
2020/11/21 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
如何利用find命令查找文件
2016/11/18 面试题
路政管理专业个人自荐信范文
2013/11/30 职场文书
国旗下的演讲稿
2014/05/08 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
党员个人总结范文
2015/02/14 职场文书
通知的写法
2015/04/23 职场文书
股东大会通知
2015/04/24 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang