基于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 相关文章推荐
jQuery 第二课 操作包装集元素代码
Mar 14 Javascript
一些相见恨晚的 JavaScript 技巧
Apr 25 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
jQuery实现元素的插入
Feb 27 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
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 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
基于php权限分配的实现代码
2013/04/28 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
js 金额文本框实现代码
2012/02/14 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
Python基于select实现的socket服务器
2016/04/13 Python
基于Python的关键字监控及告警
2017/07/06 Python
python框架django项目部署相关知识详解
2019/11/04 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
个人简历自我评价范文
2014/02/04 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
护理中职生求职信范文
2014/02/24 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
信息合作协议书
2014/10/09 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server