基于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 jQuery $.post $.ajax用法
Jul 09 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
利用python分析access日志的方法
Oct 26 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
解决layui弹框失效的问题
Sep 09 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
cmd下运行php脚本
2008/11/25 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
js打开新窗口方法整理
2014/02/17 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
详解JS模块导入导出
2017/12/20 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
python输入错误密码用户锁定实现方法
2017/11/27 Python
Python调用C语言的实现
2019/07/26 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
跟单文员的岗位职责
2013/11/14 职场文书
教师师德反思材料
2014/02/15 职场文书
演讲稿开场白台词
2014/08/25 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
求职自我评价怎么写
2015/03/09 职场文书
2015年导购员工作总结
2015/04/25 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书