如何将值从子组件发送到父组件?(功能组件)

时间:2021-02-09 13:41:55

标签: reactjs react-native

我有一个叫 main_homepageComponent 的父母和两个孩子 search_barComponent & Iteams_Component

我想做这样的事情:-

当用户在 search-boxsearch_barComponent(输入文本)中放入一些文本时,我想隐藏 Iteams_Component

层次结构:-

--main_homepageComponent
  --search_barComponent
  --Iteams_Component

目前,我正在尝试在我的 search_barComponent 中创建一个状态变量,当用户输入一些文本时:-

const [search, setSearch] = useState('')  //extra code removed
onChangeText={(text) => {setSearch(text)}}

并在我的 main_homepageComponent 中添加了如下内容:-

 const [search, setSearch] = useState('') //extra code removed
  <ScrollView style={{ height: windowHeight }}>
                        {search.length < 1 ? (
                            <View>
                                <ItemsComponent></ItemsComponent>
                            </View>
                        ) : null}
                    </ScrollView>

但我不知道如何将 search 值从 search_barComponent 发送回 main_homepageComponent 以便我可以运行

            {search.length < 1 ? (
                            <View>
                                <ItemsComponent></ItemsComponent>
                            </View>
                        ) : null}
                    </ScrollView>

当用户在搜索框中输入文本时隐藏 Iteams_Component

请回答functional components,因为我不太了解class component

这是我的应用图片:-

app Image

2 个答案:

答案 0 :(得分:2)

不要在每个组件中创建 searchsetSearch 状态,只需在父组件中创建一个并将它们作为道具发送给子组件。 在 main_homepageComponent 中添加子组件时...

<Search_barComponent search={search} setSearch={setSearch}/>
<Iteams_Component search={search} setSearch={setSearch}/>

并且在子组件中只需使用 props.searchprops.setSearch 而不是再次创建它们。

反应中有一条规则,您必须始终牢记:“单一事实来源,而不是更多”使您的状态在层次结构中足够高,因此每个孩子都依赖单一事实来源......

答案 1 :(得分:0)

Sub GeneratePivot()
Dim objSheetWithData As Worksheet
Dim objSheetWithPivot As Worksheet
Dim objListObjectWithData As ListObject
Dim objConnection As WorkbookConnection
Dim objPivotCache As PivotCache
Dim objPivotTable As PivotTable
Dim objCubeField As CubeField
Dim objPivotField As PivotField
    
Set objSheetWithData = ActiveWorkbook.Sheets(1)
Set objSheetWithPivot = ActiveWorkbook.Sheets(2)

If objSheetWithData.ListObjects.Count > 0 Then
    Set objListObjectWithData = objSheetWithData.ListObjects(1)
Else
    Set objListObjectWithData = objSheetWithData.ListObjects.Add( _
        SourceType:=xlSrcRange, _
        Source:=objSheetWithData.Range("A1").CurrentRegion, _
        XlListObjectHasHeaders:=xlYes)
End If

For Each objConnection In ActiveWorkbook.Connections
    If objConnection.Type = xlConnectionTypeWORKSHEET Then objConnection.Delete
Next objConnection

Set objConnection = ActiveWorkbook.Connections.Add2( _
    Name:="My Connection", _
    Description:="My Connection Description", _
    ConnectionString:="WORKSHEET;" & ActiveWorkbook.Name, _
    CommandText:=objListObjectWithData.Parent.Name & "!" & objListObjectWithData.Name, _
    lCmdtype:=XlCmdType.xlCmdExcel, _
    CreateModelConnection:=True, _
    ImportRelationships:=False)

Set objPivotCache = ActiveWorkbook.PivotCaches.Create( _
    SourceType:=xlExternal, _
    SourceData:=objConnection)
With objPivotCache
    .RefreshOnFileOpen = False
    .MissingItemsLimit = xlMissingItemsNone
End With

For Each objPivotTable In objSheetWithPivot.PivotTables
    objPivotTable.TableRange2.Clear
Next objPivotTable

Set objPivotTable = objPivotCache.CreatePivotTable( _
    TableDestination:=objSheetWithPivot.Range("A1"))
With objPivotTable
    .Name = "Comments"
    .ColumnGrand = True
    .HasAutoFormat = True
End With

With ActiveSheet.PivotTables("Comments").CubeFields("[Table1].[Login]")
    .Orientation = xlRowField
    .Position = 1
End With
With ActiveSheet.PivotTables("Comments").CubeFields( _
    "[Table1].[Protected Brand]")
    .Orientation = xlRowField
    .Position = 2
End With
With ActiveSheet.PivotTables("Comments").CubeFields("[Table1].[QA Comments]")
    .Orientation = xlRowField
    .Position = 3
End With
ActiveSheet.PivotTables("Comments").CubeFields.GetMeasure "[Table1].[SKU]", _
    xlCount, "Count of ASIN"
ActiveSheet.PivotTables("Comments").AddDataField ActiveSheet.PivotTables( _
    "Comments").CubeFields("[Measures].[Count of ASIN]"), "Count of SKU"
With ActiveSheet.PivotTables("Comments").PivotFields( _
    "[Measures].[Count of SKU]")
    .Caption = "Distinct Count of SKU"
    .Function = xlDistinctCount
End With
End Sub