如何将值从子组件发送到父组件？（功能组件）

Question

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

我想做这样的事情：-

当用户在search_barComponent 的search-box（输入文本）中输入一些文本时，我想隐藏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

这是我的应用图片：-

Answer 1

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

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

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

您必须始终牢记在反应中的一条规则：“单一事实来源，而不是更多”，使您的等级体系足够高，因此每个孩子都依赖于单一事实来源...

Answer 2

export default function Child (props) {
  const [ name, setName ] = React.useState({someDefault:1})

useEffect(()=>{
    props.onChange(name);
  },[name]);

 return (
   <div>
     <input name="name" 
            onChange={e=>setName({...name, name:e.target.value})}
     />
   </div>
  )

}




export default function Parent () {
    const [ name, setName ] = React.useState({})
  
    const  handleChange = (newValue) =>{
        setName(newValue);
    }
    
    return (
        <div>
            <Child value={name} onChange={handleChange}/>
        </div>
    )
}