基于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 相关文章推荐
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
html中table数据排序的js代码
Aug 09 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 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
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
React快速入门教程
2017/01/17 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
汽车专业毕业生推荐信
2013/11/12 职场文书
机械专业毕业生推荐信范文
2013/11/25 职场文书
党员培训思想汇报
2014/01/07 职场文书
大学生创业计划书的用途
2014/01/08 职场文书
校运会广播稿100字
2014/01/27 职场文书
项目经理聘任书
2014/03/29 职场文书
协议书的格式
2014/04/23 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
党建工作整改措施
2014/10/28 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
会计实训报告范文
2014/11/04 职场文书
失职检讨书大全
2015/01/26 职场文书
公司周年庆寄语
2019/06/21 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
德劲DE1102数字调谐收音机机评
2022/04/07 无线电