简体繁体 English

如何在React中的两个组件之间移动项目

[英]How to move items between two components in react

原文 2015-12-04 01:23:49 3 1 javascript/ twitter-bootstrap/ reactjs/ react-bootstrap

I'm trying to transfer an item from one list to the next, along with it's object ID so i will be able to delete it after. 我正在尝试将项目从一个列表转移到下一个列表，以及它的对象ID，以便以后可以删除它。 Currently it looks like this: 当前看起来像这样：

The problem is, I can't seem to figure out how to select the object and move it to the delete panel with that information (both panels are just panel components from bootstrap). 问题是，我似乎无法弄清楚如何选择对象并将其移动到具有该信息的删除面板上（这两个面板只是引导程序中的面板组件）。 I tried using the checkboxes (shown below), but I wasn't able to select the value of the list group (also a bootstrap component) to pass it to the next panel. 我尝试使用复选框（如下所示），但无法选择列表组的值（也是引导程序组件）将其传递到下一个面板。

The first panel get's passed the organizations from the database, into this.props, but the second I was just going to use an object that I would add to when the button on the first panel was clicked and pass that object into this.props. 第一个面板将组织从数据库传递到this.props中，但是第二个面板我将使用单击第一个面板上的按钮时要添加的对象，然后将该对象传递到this.props中。

Is there a best practice way to do this? 是否有最佳做法来做到这一点？ Any help on solutions would be great. 解决方案方面的任何帮助都会很棒。 Right now the remove part is just static and doesn't actually do anything. 现在，删除部分只是静态的，实际上不执行任何操作。 I'm new to react and one way binding, but I feel like something that seems this simple shouldn't have me stumped like this. 我是新来的反应者，它是一种绑定方式，但是我觉得似乎这种简单的事情不应该让我陷入困境。

1 个解决方案

You could maintain an array like organizationIdsToDelete or even organizationsToDelete that gets added to when you select organizations to be deleted. 您可以维护一个数组，例如organizationIdsToDelete甚至organizationsToDelete ，当您选择要删除的组织时会添加到该数组。 Then pass the original organizations list to the first component as you are now, and pass the filtered list of organizations to delete to the second component. 然后，像现在一样将原始组织列表传递到第一个组件，然后将过滤后的组织列表传递给第二个组件。