如何用react做增删

如何用react做增删

1、使用react做一个输入框,点击提交在下面列表展示,点击对应的列表项,删除该项,如下:

Snipaste_2019-12-20_13-43-24.jpg

2、项目的数据结构,首先分析需求,一个input框,一个button,一个列表。可以把input和button看成一个组件,列表看成一个组件。在state中的数据结构可以设置为:

//state的数据结构
 this.state = {
 inputValue: '', //用于存放input的值
 list: []     //存放列表的值
}

input框功能实现,原理:input框绑定onChange事件,每当输入字符时,改变this.state.inputValue的值,React中当state或props中的值改变,render函数会重新执行。实现如下:

 //方法一:改变this.state.inputValue值,通过事件返回的e.target.value,获取输入框中的值
 <input type="text" onChange={this.handleChange} value={this.state.inputValue} />
 handleChange (e) {
     //同步setState
     this.setState({
         inputValue: e.target.value
     });
 }
 //方法二:在input框上设置ref属性,ref表示对组件真正实例的引用。
 //设置ref={(input) => {this.input = input}}表示,将当前input框中的value值,
 //绑定到this上,在handleChange方法中,便可以直接取input的值:this.input.value
 <input type="text"
        id="inputValue"
        onChange={this.handleChange}
        value={this.state.inputValue}
        ref={(input) => {this.input = input}}
 />
 handleChange (e) {
     const value = this.input.value;
     //异步setState,可以为异步方法,带有一个参数prevState,即为上一步state的内容,同时带有回调函数
     this.setState(() => ({
         inputValue: value
     }), () => {
         console.log('赋值完成!');
     });
 }

提交功能实现,原理:很容易就想到,当点击提交的时候,将input框中的值push到this.state.list即可。

<button onClick={this.handleSubmit}>提交</button>
 //提交添加UI列表
 handleSubmit () {
     this.setState((prevState) => ({
         list: [...prevState.list, prevState.inputValue],
         inputValue: ''
     }), () => { //回调函数
         console.log(this.ul.querySelectorAll('li').length);
     });
 }

将list的值在页面展示出来,可以通过map方法,循环li。

 this.state.list.map((item, index) => {
     return <li key={index}>{item}</li>
 })
 /*
     注:react中循环的时候,必须在每一项加上key的属性,不然控制台会报错,
     原因是:diff算法在循环的时候,会去匹配对应的key值。此处用index作为key值是不合理的做法,key值应该是唯一的,
     diff算法后面会详细讲到。
 */

点击li,删除当前li,原理:每一个li都有对应的index,点击li时,获取index,在list找到对应下标,然后delete即可。

 this.state.list.map((item, index) => {
     return <li key={index} onClick={this.handleDeleteItem.bind(this, index)}>{item}</li>
 })
 //删除当前点击item
 handleDelete (index) {
     this.setState((prevState) => {
         const list = [...prevState.list];
         list.splice(index, 1);
         return {
             list: list
         }
     });
 }
Image placeholder
前端答疑
未设置
  81人点赞

没有讨论,发表一下自己的看法吧

推荐文章
如何用react做一个表格

如何用react做一个表格1、首先使用React.createClass方法创建一个组件;2、在render中通过React.DOM创建table、tr、tbody标签;3、在tr标签中使用map方法

如何使用react做安卓app

如何使用react做安卓app一、首先,我们先创建一个react项目作为演示。1.全局安装create-react-app#全局安装 npminstall-gcreate-react-app2.构建一

如何用react写页面跳转

如何用react写页面跳转1、使用react-router-dom中的Link实现页面跳转一般适用于,点击按钮或其他组件进行页面跳转,具体使用方式如下:import{Link}from'react-r

如何用react写轮播?

前提:安装好Node.js安装。【推荐阅读:nodejs怎么下载安装?】步骤:1、安装swiper使用node包管理器npm来安装swipernpminstallswiper--save2、在轮播组件

如何用react构建单页面

如何用react构建单页面react构建单页面需要使用react-router-dom库,所以我们需要先安装npminstallreact-router-dom-S下面以一个例子讲解,react构建单

如何引用react-dom

如何引用react-dom引用react-dom很简单,首先你需要创建一个react项目,这里我们介绍两种方式,第一种是使用npm来创建,另一种是采用script标签引入react的方式创建项目。●使

如何使用react开发项目

如何使用react开发项目1、环境搭建开发react项目,环境搭建是第一步,react开发需要搭建nodejs环境,因为使用官方的脚手架搭建项目最为简单,而脚手架和webpack依赖于nodejs。w

如何下载使用react.js

如何下载使用react.js一、下载react.js、react-dom.js和babel.js在浏览器中输入这三个地址,将得到的页面全选后复制粘贴到本地的文件中,分别对应react.js、react

如何使用react native

如何使用reactnative一、首先安装react-native-cli脚手架工具npminstall-greact-native-cli二、使用react-native-cli创建一个初始化的工程

怎么用react写界面

怎么用react写界面用react写页面,官方的做法是采用jsx语法,JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内

怎么用react写登陆框

怎么用react写登陆框1、创建一个Login组件,添加userName和userPassword状态;2、为输入框绑定onChange事件到changeUsername和changePassword

用react怎么做移动端

用react怎么做移动端1、首先使用create-react-app脚手架创建react项目;2、然后打开index.html文件,在头部添加meta元数据,设置用户网页的可视区域宽度为设备的宽度,初

用react怎么插图片

用react怎么插图片1、img标签引入图片因为react其实是通过js的reader函数渲染的页面,所以直接写src=“路径”是无法引入图片需要用下面的方式引入2、背景图片引入1第一种就是常规的新建

如何利用Reworld做一个一键吸空投箱的效果

功能效果展示运行环境Win7,Win8,Win10Reworld版本体验版vc_redist.x64运行环境针对零基础读者的补充下载安装Reworld对应版本Reworld官网链接:http://ww

如何用vscode启动react项目

如何用vscode启动react项目要求:●具有nodejs环境、已安装npm●已安装vscode首先使用create-react-app脚手架创建一个项目。create-react-appdemo1

如何用npm下载react

如何用npm下载react●首先我们需要安装nodejs环境【Node.js安装教程】我们可以在cmd中输入node-v和npm-v来检测是否安装成功。node-v npm-v当两条命令都成功的输出了

GoWeb教程_13.5. 实现博客的增删改

前面介绍了beego框架实现的整体构思以及部分实现的伪代码,这小节介绍通过beego建立一个博客系统,包括博客浏览、添加、修改、删除等操作。 博客目录 博客目录如下所示: . ├──controlle

深入浅出百亿请求高可用Redis(codis)分布式集群揭秘

摘要:作为noSql中的kv数据库的王者,redis以其高性能,低时延,丰富的数据结构备受开发者青睐,但是由于redis在水平伸缩性上受限,如何做到能够水平扩容,同时对业务无侵入性是很多使用redis

简单使用rpm命令

课程推荐:Python开发工程师--学习猿地--送9个上线商业项目 安装rpm-ivhhttpd-2.4.6-67.el7.centos.x86_64.rpm -iinstall安装-vverbose

如何用别人的css样式

如何用别人的css样式使用别人的css样式首先需要引入,引入到自己的HTML文档中,主要有两种方式。1、下载别人的css样式,通过link标签引入。打开网站,按下f12打开开发者工具面板,选中Sour

如何用css做导航栏?

如何用css做导航栏?1、新建一个html文件,在head部分,编写css样式○list-style-type:none;是除掉导航前面默认带的点○lia,lia.active,lia:hover:n

Java的Lambda表达式有何用处?如何使用?

本文转载自知乎,之前刚接触到Lambda表达式,看了好多文章,看完也还是一脸懵逼,后来刷知乎刷到这篇文章,顿开茅塞,让我明白了Lambda表达式到底是个啥,咋用。最重要的是第一点,知道了这个,其他的要

如何在浏览器中获取 Production Mode 的 React 实例

https://github.com/LiuuY/Blog...在ProductionMode下,React并没有暴露其实例。无论什么原因如果你要获取的话可以参考以下方法。条件浏览器安装了ReactD

你真的了解 React 吗?这里有 50 个 React 面试问题

如果你是一位有理想的前端开发人员,并且正在准备面试,那么这篇文章就是为你准备的。本文收集了React面试中最常见的50大问题,这是一份理想的指南,让你为React相关的面试做好充分的准备工作。首先我