`

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通过将长...

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

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

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

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

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

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

    react-react版动态简历

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

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

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

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

    在本文中,我们将深入探讨如何使用React来构建一个动态、可搜索且轻量级的项目组合。React作为Facebook推出的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-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 , ...

    js删除数组中指定元素

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

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

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

    React零基础自学手册.pdf

    - **渲染逻辑**:根据state中的数据渲染评论列表。 ##### Lesson 16 - 实战分析:评论功能(三) - **样式调整**:使用CSS美化评论组件。 - **性能优化**:避免不必要的渲染。 - **用户体验**:添加加载提示、错误...

    React-在React中实现类似于Atom中可拖拽的Tab

    3. **状态管理**:在React中,组件的状态(state)用于存储可变数据。我们需要管理Tab的位置信息以及当前激活的Tab。当Tab被拖动时,更新其位置状态;当用户点击Tab时,更新激活的Tab状态。 4. **第三方库**:虽然...

    react-灵活基于promise的React数据加载器

    1. **React组件状态管理**:在React中,组件的状态(state)是驱动视图更新的关键。当数据加载器被集成到组件中时,它可以控制状态的变化,当数据请求完成时更新状态,从而触发组件的重渲染。 2. **Promise的理解与...

    深入解析React中的列表渲染:高效更新DOM的秘诀

    列表渲染是React中的一个常见需求,它允许开发者根据数据数组动态生成多个组件。本文将详细介绍React中列表渲染的工作原理、方法和最佳实践。 React是一个声明式的JavaScript库,用于构建用户界面,它提供了一种高效...

Global site tag (gtag.js) - Google Analytics