`

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数据加载器

    "react-灵活基于promise的React数据加载器"旨在提供一个高效、灵活的方式来处理异步数据请求,使得组件能够在需要时按需加载数据,提高用户体验。Promise是现代JavaScript中的一个核心特性,用于处理异步操作,它使...

    基于React动态配置表单

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

    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-ReactVirtuoso是一个简单易用的React组件用于渲染庞大的数据列表

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

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

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

    react-react版动态简历

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

    基于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验证的支持,当用户填写表单时...

    数据提取工具—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中传入组件的props改变时更新组件的几种实现方法

    我们使用react的时候常常需要在一个组件传入的props更新时重新渲染该组件,常用的方法是在componentWillReceiveProps中将新的props更新到组件的state中(这种state被成为派生状态(Derived State)),从而实现重新...

    react-Resonance通过React制作数据驱动的动画渐变

    在React世界中,UI动态效果和动画的实现是提升用户体验的关键因素之一。"react-Resonance"项目正是为了帮助开发者实现数据驱动的动画渐变而设计的。它结合了React的组件化思想和现代动画库的优势,为构建富有表现力...

Global site tag (gtag.js) - Google Analytics