javascript - 如何在 react 中的两个组件之间移动项目

Question

我正在尝试将一个项目及其对象 ID 从一个列表转移到下一个列表，以便之后可以将其删除。目前它看起来像这样:

问题是，我似乎无法弄清楚如何选择对象并将其移动到包含该信息的删除面板(两个面板都只是 Bootstrap 中的面板组件)。我尝试使用复选框(如下所示)，但无法选择列表组(也是 Bootstrap 组件)的值以将其传递到下一个面板。

第一个面板将组织从数据库传递到 this.props 中，但第二个面板我只是要使用一个对象，当单击第一个面板上的按钮时我将添加到该对象并将该对象传递到此中.props。

是否有最佳实践方法可以做到这一点？任何有关解决方案的帮助都会很棒。现在删除部分只是静态的并且实际上不执行任何操作。我是 react 和单向绑定(bind)的新手，但我觉得看起来这么简单的事情不应该让我这样难倒。

Answer 1

您可以维护一个类似于 organizationIdsToDelete 甚至 organizationsToDelete 的数组，当您选择要删除的组织时，该数组会添加到其中。然后像现在一样将原始组织列表传递给第一个组件，并将筛选后的要删除的组织列表传递给第二个组件。