Question

我正在使用React和Redux构建一个简单的文件夹管理系统。其中一个要求是能够使用shift选择多个文件。

e.g。如果我选择了文件夹B，则具有以下结构：

[Folder] Folder A
[Folder] Folder B *
[Folder] Folder C
[Folder] Folder D
[Folder] Folder E
[File] File 1
[File] File 2
[File] File 3
[File] File 4
[File] File 5

现在，如果用户按住shift键并单击文件3，我希望文件夹B和文件3之间的所有内容都被标记为已选中。

我的商店看起来像：

    {
      directoryData: {
        directories: [{id: 1, name: 'Folder A'}, {id: 2, name: 'Folder B'}, ...],
        selected: [2]
      },
      fileData: {
        files: [{id: 1, name: 'File A'}, {id: 2, name: 'File B'}, ...],
        selected: [1, 2]
      },
    }

我对如何处理这种情况感到茫然。如果所有项目都存储在一个数组中，我可以在reducer中轻松处理它，但是由于directoryData和fileData子树都受到影响，所以不会似乎是一种选择。

我几乎需要的是某种顶级组件，它可以同时访问文件和目录的状态，计算应该选择哪些项目，然后调用directoryActions.select()或{{ 1}}表示需要选择的每个项目。

到目前为止，我已经避免在一个组件中放置这么多业务逻辑，并且想知道是否有更好的方法来解决这个问题。

Answer 1

我建议采用不同的州结构：

{
  directoryData: {
    // array of mixed directories and folder with visual ordering
    content: [{ type: 'directories', id: 1 }, { type: 'directories', id: 2 }, { type: 'files', id: 1 }, { type: 'files', id: 2 }],

    // optional: array of selected mixed directories and folder
    selected: [{ type: 'directories', id: 2 }, { type: 'files', id: 1 }],

    directories: { the directories data
      1: {id: 1, name: 'Folder A'}, 
      2: {id: 2, name: 'Folder B'},
    },
    files: { // the files data
      1: {id: 1, name: 'File A'}, 
      2: {id: 2, name: 'File B'}
    }
}

要选择使用shift，只需通过索引复制切片 content数组的selected数组。另一种选择是在内容中的项目中添加selected预言，然后进行切换。我更喜欢selected数组，因为它更容易操作选定的项目。
如果添加文件或目录，则将它们添加到各自的文件或目录中集合，然后在content数组中添加引用。
要删除，请执行与添加相反的操作。
要更改文件或目录，请替换中的对象各自的藏品。

处理在React Redux中选择所有内容

1 个答案: