[英]Pass data from two independent component in reactjs
I have a parent div that has all the components for my app. 我有一个父div,其中包含我应用程序的所有组件。
In Searchbar,i have two components. 在搜索栏中,我有两个组成部分。 search input and filter. 搜索输入和过滤器。 When the user enters in the search box, or checks the checkbox, i need to update the data required to populate the , then do a service call passing this data. 当用户输入搜索框或选中复选框时,我需要更新填充所需的数据,然后进行服务调用以传递此数据。 Now, my questions are: 现在,我的问题是:
Where do i need to create the data object that is required for the service call? 我需要在哪里创建服务调用所需的数据对象?
How do i update the particular object created so that when the user enters something in the search input or checks/unchecks the checkbox, the object needs to be updated accordingly and the service call is triggered? 如何更新创建的特定对象,以便当用户在搜索输入中输入内容或选中/取消选中复选框时,需要相应地更新对象并触发服务调用?
The object looks something like this: 该对象看起来像这样:
{ "term": "USER ENTERED SEARCH TERM", "filters": [ { "name" : "FILTER1", "values" : ["CHECKBOX1",.....] }, { "name" : "FILTER2", "values" : ["CHECKBOX2".....] } ] } {“ term”:“用户输入的搜索词”,“ filters”:[{“ name”:“ FILTER1”,“ values”:[“ CHECKBOX1”,.....]},{“ name”:“ FILTER2 “,” values“:[” CHECKBOX2“ .....]}]}
Keep the state in the SearchBar. 将状态保留在SearchBar中。 In there, keep state for each checkbox and state for the search box. 在其中,保持每个复选框的状态和搜索框的状态。
From the SearchBar, give callback functions as props to the search box component and to the checkbox components. 从SearchBar,将回调函数作为道具提供给搜索框组件和复选框组件。 So that when the search box value is changed (use the onchange event), you will trigger the callback, which will then initiate the service call, and then update the state. 这样,当更改搜索框的值(使用onchange事件)时,您将触发回调,然后回调将启动服务调用,然后更新状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.