`

React state从数组中动态移除子项item

阅读更多

1、当我们动态操作state的适合,遇到移除一个子项,需要更新数组的state

// set state
this.state = {
  files: []
}

// add item
this.setState({
      files: [
        ...this.state.files,
        fileInfo
      ]
    });


// Remove item
removePic(index) {
    this.setState({
      files: this.state.files.filter((_, i) => i !== index)
    })
  }

<span onClick={this.removePic.bind(this, index)} />


// show items
{state.files.map((file, index) => (
              <li key={index}>
                <span onClick={this.removePic.bind(this, index)} />
              </li>
            ))}

 



有疑问或技术交流,扫描公众号一起讨论学习。

更多React在线学习访问:http://each.sinaapp.com/react/index.html

 

更多实例应用扫码体验:

分享到:
评论

相关推荐

    ReactV 15.5.0 从入门到精通第二章 React语法基础数组的

    ReactV 15.5.0 从入门到精通第二章 React语法基础数组的扩展

    react-array-chunk-render:React组件混合以异步渲染长数组子项

    React阵列块渲染我在 IE-8 中使用 React 时有一些经验,当渲染具有长数组输入的子组件时,会导致浏览器中的long script running alert 。 所以这个 react 组件 mixin 是为了避免long script running alert通过将长...

    03 React 创建组件、绑定属性( 绑定class 绑定style)、引入图片 循环数组渲染数据

    本课程主要讲解了React组件的创建、属性绑定(包括绑定class和style)、引入图片以及如何循环数组来渲染数据,这些都是React开发中的核心概念。 1. **创建组件**:React组件可以通过定义一个JavaScript类或使用函数...

    react-linkState将事件绑定至state支持Preact和React

    本篇文章将深入探讨`linkState`的功能、用法以及如何在React和Preact中使用它。 `linkState`的主要优点在于它提供了一种简洁的语法,使得更新状态时不必手动地调用`setState`方法。这个辅助函数由`developit`社区...

    react-react版动态简历

    在本项目中,“react-react版动态简历”是一个使用React技术栈构建的个人动态简历应用。React是Facebook开发的一个用于构建用户界面的JavaScript库,尤其适合构建单页应用程序(SPA)。这个项目的描述简单明了,表明...

    16 React【无人点餐无人收银系统案例】路由配置、菜品列表制作、请求数据渲染二维数组、 动态路由传值【基础项目】

    16 React【无人点餐无人收银系统案例】路由配置、菜品列表制作、请求数据渲染二维数组、 动态路由传值【基础项目】(31分8秒)

    react-一个简单的React组件用于根据条件封装子项

    "react-一个简单的React组件用于根据条件封装子项"这个项目提供了一个实用的组件示例,它能够根据特定的条件来动态地渲染子组件。这种功能在实际开发中非常常见,比如在实现条件显示、逻辑判断或者数据过滤时。 ...

    react中实现搜索结果中关键词高亮显示

    综上所述,React中实现搜索结果中关键词高亮显示涉及到对组件状态和属性的管理、使用filter函数过滤数组、正则表达式的应用、字符串的替换以及安全地处理HTML内容。这些知识点结合在一起,构成了一个完整的关键词...

    react-使用React构建的动态可搜索轻量级的项目组合

    在本文中,我们将深入探讨如何使用React来构建一个动态、可搜索且轻量级的项目组合。React作为Facebook推出的JavaScript库,已经成为了前端开发的重要工具,尤其在构建用户界面方面表现出色。它允许开发者创建可复用...

    js 实现根据数组分组动态生成table(合并相同项)

    在JavaScript编程中,根据数组数据进行分组并动态生成表格是一项常见的需求,特别是在Web开发中。这个场景通常出现在数据展示、报表生成或者数据分析的应用中。本文将深入探讨如何使用JavaScript实现这一功能,尤其...

    react-ReactStateContext使用ReactContext的轻量级状态管理

    综上所述,React State Context提供了一种在React应用中进行轻量级状态管理的方式,它可以简化数据流,提高代码的可读性和可维护性。然而,对于复杂的大型应用,可能需要更强大的状态管理库,比如Redux或MobX。在...

    React key值的作用和使用详解

    在react项目中总会遇到这样一个的坑 这是警告数组遍历子元素要有一个唯一的key值,但是key到底是什么,在代码中到底起了什么作用? key概述 react中的key属性,它是一个特殊的属性,它的出现不是给开发者用的...

    react项目使用react-dnd实现拖拽排序

    在React项目中,拖拽排序是一项常见的交互需求,可以提供用户友好的界面体验。React DND(Drag and Drop)库是实现这一功能的利器。它允许开发者轻松地将拖放功能集成到React组件中,无需深入理解底层浏览器事件。...

    react-ReactVirtuoso是一个简单易用的React组件用于渲染庞大的数据列表

    React Virtuoso是一个高效且灵活的React组件,专门设计用于处理大数据列表的渲染。在现代Web应用中,尤其是在数据驱动的界面中,显示大量条目是常见的需求,...无论是新手还是经验丰富的开发者,都能从这个组件中受益。

    React-reactsortable一个可排序的React列表组件

    在这个例子中,`Sortable`组件接收一个`items`属性,它是一个数组,包含了列表中的所有项。每个项都有一个唯一的`key`,这对于React正确地追踪和更新状态至关重要。`{item =&gt; &lt;li key={item.id}&gt;{item.name}&lt;/li&gt;}`...

    react-reactleafletLeaflet地图的React组件

    在本文中,我们将深入探讨`react-leaflet`库,这是一个基于React的库,用于与流行的JavaScript地图库Leaflet集成。`react-leaflet`允许开发者利用React的声明式编程风格来构建交互式的地图应用。 首先,我们需要...

    use-state-as-array:将多个React状态定义为一个数组

    useStateAsArrayReact钩子 一个 ,以数组的形式创建多个react useState状态。安装$ yarn add use-state-as-array进口import useStateAsArray from 'use-state-as-array' ; 用法const [ stateAsArray , ...

    react-native 解决ios中部分版本不能输入中文

    在React Native开发过程中,遇到iOS设备上部分版本无法输入中文的情况时有发生。这类问题往往给开发者带来不小的困扰,尤其是在需要用户进行中文输入的应用场景下。本文将详细分析导致此问题的原因,并提供一种有效...

    js删除数组中指定元素

    JavaScript 提供了多种方式来删除或移除数组中的元素: - **`splice()`方法**:这是最直接的方法,可以删除指定位置的元素或多个元素。例如,要删除第一个匹配到的元素,我们可以这样做: ```javascript let ...

    react-在React16中使用组件缓存加速服务器端渲染

    组件缓存是指在服务器端对已经渲染过的React组件结果进行存储,当下次遇到相同或相似的组件渲染请求时,直接从缓存中获取结果,避免重复计算和渲染。这种做法可以显著减少服务器资源消耗,提高响应速度,尤其对于...

Global site tag (gtag.js) - Google Analytics