响应输入焦点事件以显示其他组件

我读了一些关于这个的教程。他们告诉我应该用ref来做。 但这很普遍。

这是我的问题: 基本上 Header 组件包括 NavBar , SearchBar 和 ResultSearch 组件。

const Header = () => {
return (
    <header className="ss_header">
        <Navbar />
        <SearchBar />
        <ResultSearch />
    </header>
);
};

而在 搜索栏 组件。每当我专注于输入文本时。它发出一个事件并显示 结果搜索 任何形式的组件(更改样式,或…)。

class SearchBar extends Component{
render() {

    return (
        <div className="search_bar">
            <section className="search">
                <div className="sub_media container">
                    <form method="GET" action="" id="search_form">
                        <Icon icon="search" />
                        <span className="autocomplete">

                        <input
                            className="search_input"
                            autoCorrect="off"
                            autoComplete="off"
                            name="query"
                            type="text"
                            placeholder="Search for a movie, tv show, person..." />
                    </span>
                    </form>
                </div>
            </section>
        </div>
    );
}
}

风格在 结果搜索 组件。我被设定 display: none .

.results_search { display: none; }

我认为ResultSearch将从 搜索栏 退后 display: block 对于 结果搜索 组件。有可能吗?

我该怎么办? 我的代码在这里: https://codesandbox.io/s/3xv8xnx3z5