基于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动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
TypeScript 中接口详解
Jun 19 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
angularjs中的$eval方法详解
Apr 24 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
JavaScript实现美化滑块效果
May 17 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
Javascript实现关闭广告效果
Jan 29 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/04/25 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
Selenium的使用详解
2018/10/19 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
python脚本开机自启的实现方法
2019/06/28 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
python add_argument()用法解析
2020/01/29 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
党支部承诺书范文
2014/03/28 职场文书
大学生标准自荐书
2014/06/15 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
车队安全员岗位职责
2015/02/15 职场文书
2015年学校总务工作总结
2015/07/20 职场文书