时间戳

首页 > 解决方案 > 添加滑动删除以拖放组件

reactjs - 添加滑动删除以拖放组件

问题描述

我正在开发一个使用拖放（react-beautiful-dnd）的反应网络应用程序：

https://stackblitz.com/edit/react-ef9gan

但是，该包没有删除列表中项目的功能，因此我想使用另一个包来将输入区域滑出屏幕以删除。https://www.npmjs.com/package/react-swipe-to-delete-component

我遇到的问题是这两个包都使用 .map 函数来呈现列表。

反应滑动删除

const list = data.map(item => (
  <SwipeToDelete key={item.id} item={item}>
      //user code
  </SwipeToDelete>
)

React Beautiful DnD（来自 stackblitz，为后期简化）

                      <div>
                        {this.state.inputs.map((input, index) => (
                          <Draggable key={input.id} draggableId={input.id} index={index}>
                            {(provided, snapshot) => (

                             // omitted code

                            )}
                          </Draggable>

                        ))}
                        {provided.placeholder}
                      </div>

我知道我可以按每个字段呈现一个图标并删除此 S/O 问题中的项目（从 react-beautiful-dnd 水平列表中删除单个项目），但出于苦行的原因，我试图避免使用按钮。我还是 React 的新手，所以这可能是一个 n00b 问题，但是是否可以在一个视图中使用两个单独的 NPM 包的功能？

标签： reactjs

解决方案

推荐阅读