小编fra*_*dep的帖子

基本上是 React 的新手，我对如何在组件之间正确传递状态有点困惑。我已经在React 中发现了一个类似的问题——将表单元素状态传递给兄弟/父元素的正确方法？ 但我想知道你是否可以给我下面代码的具体答案。

目前应用程序的结构包括：

• 父组件 - App
• 2个孩子：SearchBar和RecipesList

目标是对我的 Meteor 集合进行异步搜索，并仅显示recipes与搜索词匹配的内容。

现在，我只是展示了我的 Meteor 收藏中的所有食谱。我创建了一个名为的有状态组件SearchBar，它将输入值保存为this.state.term. 这个想法是将状态传递给，RecipesList但我不确定这是否正确。或者，我会让App处理状态并将其传递给孩子。我相信这是一个很常见的场景，你是怎么做的？

App

class App extends Component {

render( ) {
    return (
        <div>
            <Navbar/>
            <SearchBar/>
            <RecipesList/>
        </div>
    );
}
}

SearchBar

export default class SearchBar extends Component {

constructor( props ) {
    super( props );

    this.state = {
        term: ''
    };
}

onInputChange( term ) {
    this.setState({ term …