`

React 动态更新子项item从array数据

阅读更多
// 初始化state
this.state = {
  files: [],
}

// 添加数据到array
this.setState({
  files: [
    ...this.state.files,
    fileInfo
  ]
});

// 动态移除子项从array
removePic(index) {
    this.setState({
      files: this.state.files.filter((_, i) => i !== index)
    })
  }

// 循环显示数据
{state.files.map((file, index) => (
  <li key={index}>
    <span className="del" onClick={this.removePic.bind(this, index)}>
      <a href="javascript:;"><img src="" /></a>
    </span>
    <span className="p_img">
      <a href="javascript:;">
        <img src={file.src} />
      </a>
    </span>
  </li>
))}

 



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

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

分享到:
评论

相关推荐

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

    我们可以在本地缓存获取到的数据,并在下次请求相同数据时直接从缓存中返回,避免了不必要的网络请求。缓存策略可以基于多种因素,如数据的时效性、缓存大小限制等。 8. **代码示例**:下面是一个简化的数据加载器...

    基于React动态配置表单

    3. **数据绑定**:React组件通过props与父组件通信,动态表单的配置信息可以从父组件传递过来,也可以保存在全局状态管理工具(如Redux或MobX)中。表单的值则需要通过事件处理函数(如onChange)实时更新到状态,以...

    react-react版动态简历

    4. **生命周期方法**:React组件有多个生命周期方法,如`componentDidMount`、`componentDidUpdate`和`componentWillUnmount`,分别在组件挂载、更新和卸载时调用,用于执行特定操作,比如初始化数据、处理更新后的...

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

    React Virtuoso是一个高效且灵活的React组件,专门设计用于处理大数据列表的渲染。在现代Web应用中,尤其是在数据驱动的界面中,显示大量条目是常见的需求,例如表格、数据网格或者滚动列表。传统的渲染方式可能会...

    React项目动态设置title标题的方法示例

    在React搭建的SPA项目中页面的title是直接写在入口index.html中,当路由在切换不用页面时,title是不会动态变化的。那么怎么让title随着路由的切换动态变化呢? 1.在定义路由时增加title属性。 { path: /...

    react-Reacthook用于创建QRCode数据URL

    本篇文章将深入探讨如何使用React Hooks来创建QRCode数据URL,这在许多应用场景中都非常实用,例如生成可分享的二维码或者动态生成个性化二维码。 首先,我们需要了解React Hooks中的`useState`和`useEffect`。`...

    react + datav 炫酷的大屏数据可视化展示.zip

    在"react + datav"项目中,Datav被用来创建炫酷的可视化效果,使得数据以直观、动态的方式呈现。 3. **JavaScript**: JavaScript作为Web开发的基础语言,为这个项目提供了动态交互的能力。无论是React组件的状态...

    基于React实现表单数据的添加和删除详解

    "基于React实现表单数据的添加和删除详解" React是Facebook开发的一款开源JavaScript库,用于构建用户界面。它基于组件的概念,允许开发者将UI分解为独立、可重用的组件,从而提高代码的可维护性和可读性。React中...

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

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

    react-在react中轻松让你的数据产生动画

    React本身并不直接提供动画功能,但它可以通过一些库和策略实现数据驱动的动画效果。让我们深入探讨如何在React中轻松实现数据动画。 首先,我们需要理解数据驱动的动画概念。这种技术依赖于将动画效果与应用程序的...

    react-Reactvis一组数据可视化图表React组件

    此外,它还支持动态数据更新,当数据源改变时,图表会自动更新。 6. **与其他库集成**:React-vis可以与其他React库无缝集成,如Redux用于状态管理,或者D3.js库用于更底层的数据处理和图形绘制。 7. **文档和示例...

    react-ReactDatasheet类似Excel的数据网格react组件

    4. **实时更新**:在用户编辑数据时,ReactDatasheet会即时更新数据模型,确保数据与视图始终保持同步。 5. **兼容性**:由于基于React,ReactDatasheet能够很好地与其他React组件库集成,如Redux、MobX等状态管理...

    react-plexusform采用JSONSchema的react动态表单组件

    1. **动态生成表单**:通过JSON-Schema,React-Plexusform可以根据不同的数据结构自动生成相应的表单组件,如输入框、下拉菜单、复选框等。 2. **数据验证**:组件内建了对JSON-Schema验证的支持,当用户填写表单时...

    基于React和Echart的数据可视化展示大屏设计源码

    该项目提供了一个数据可视化大屏,基于React和Echart框架,支持数据动态刷新渲染和屏幕适应。此外,项目还提取了许多共用组件,包括天气组件、时间组件和轮播表格等,持续更新中,为用户提供一个高效、实时的数据...

    数据提取工具—electron+react

    1、用electron+react制作的一个数据提取工具,react渲染页面,electron主线程调用本地sqlite数据库 2、数据和依赖包删除了,测试的时候自行添加数据与依赖 3、开发测试,首先用npm start 启动react 然后再用electron...

    react-一个基于React和Redux的服务器处理数据表

    例如,我们可以有一个`loadData` action creator来从服务器获取数据,`applyFilter` action creator来更新筛选条件,以及`changeSortOrder` action creator来改变排序方式。 4. **创建Reducers**:Reducers是纯函数...

    react-reactsparkline实现简单微线图sparklines的React组件

    7. **性能优化**:由于React Sparkline是基于React构建的,因此它利用了React的虚拟DOM,确保了高效的数据更新和渲染。 在实际应用中,你可以结合其他React库,如Redux来管理状态,或者使用Axios等库获取API数据,...

    react-ReactTable一个快速轻量级固执己见的React数据表格

    5. **数据管理**:ReactTable支持实时数据更新,可以轻松处理复杂的表格操作,如编辑、删除和新增数据。 6. **扩展性**:ReactTable提供了插件系统,可以扩展其功能,例如集成服务器端数据处理或添加自定义筛选器。...

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

    `react-sortable`提供了丰富的API和事件回调,例如`onSortEnd`,它会在排序结束后触发,允许你更新你的数据源以反映新的排序顺序。你还可以通过设置`useDragHandle`属性来指定特定的元素作为拖动手柄,而不是整个...

    react-antd table树形数据默认展开行实现jsx文件

    react-antd table树形数据默认展开行实现jsx文件

Global site tag (gtag.js) - Google Analytics