IT技术 - react输入焦点事件以显示其他组件 - 吾爱随笔录

我读了一些关于这个的教程。他们告诉我应该使用 ref 来做到这一点。但它很一般。

这里是我的问题：基本上在Header成分包括NavBar，SearchBar和ResultSearch组件。

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

并在SearchBar组件中。每当我专注于输入文本时。它ResultSearch以任何方式（改变样式或...）发出事件和显示组件。

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>
    );
}
}

ResultSearch组件中的样式。我被定了display: none。

.results_search { display: none; }

我认为ResultSearch将收到来自事件SearchBar和集回来display: block的ResultSearch组成部分。有可能吗？

我该如何处理？我的代码在这里：https : //codesandbox.io/s/3xv8xnx3z5

class Header extends Component { state = { focus: false }; handleInputFocus = () => { this.setState({ focus: true }); }; handleInputBlur = () => { this.setState({ focus: false }); }; render() { return ( <header className="ss_header"> <SearchBar onFocus={this.handleInputFocus} onBlur={this.handleInputBlur} /> {this.state.focus ? <ResultSearch /> : null} </header> ); } }