从reactjs中的两个独立组件传递数据

Question

我有一个父div，包含我的应用程序的所有组件。

                                      

在Searchbar中，我有两个组件。搜索输入和过滤器。 当用户进入搜索框或检查复选框时，我需要更新填充所需的数据，然后进行传递此数据的服务调用。现在，我的问题是：

1. 我需要在哪里创建服务调用所需的数据对象？

2. 如何更新创建的特定对象，以便当用户在搜索输入中输入内容或选中/取消选中复选框时，对象需要相应更新并触发服务调用？

对象看起来像这样：

{   ＆＃34; term＆＃34;：＆＃34; USER ENED SEARCH TERM＆＃34;，   ＆＃34;过滤器＆＃34;：[     {       ＆＃34;名称＆＃34; ：＆＃34; FILTER1＆＃34;，       ＆＃34;值＆＃34; ：[＆＃34; CHECKBOX1＆＃34;，.....]     }，     {       ＆＃34;名称＆＃34; ：＆＃34; FILTER2＆＃34;，       ＆＃34;值＆＃34; ：[＆＃34; CHECKBOX2＆＃34; .....]     }   ] }

Answer 1

1. 将状态保留在SearchBar中。在那里，为搜索框的每个复选框和状态保持状态。

2. 从SearchBar中，将回调函数作为道具提供给搜索框组件和复选框组件。因此，当搜索框值更改时（使用onchange事件），您将触发回调，然后启动服务调用，然后更新状态。