基于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 设计模式学习 Singleton
Jul 27 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 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中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
Python中使用item()方法遍历字典的例子
2014/08/26 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
Python实现的简单计算器功能详解
2018/08/25 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
详解python中sort排序使用
2019/03/23 Python
python 实现兔子生兔子示例
2019/11/21 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
Python多线程的退出控制实现
2020/08/10 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
农业项目建议书
2014/08/25 职场文书
安全生产标语大全
2014/10/06 职场文书
2014年公司工作总结
2014/11/22 职场文书
欢迎新生标语2015
2015/07/16 职场文书