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

我读过一些关于此的教程。他们告诉我应该使用 ref 来做到这一点。 但它非常一般。

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

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

And In 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 for ResultSearch成分。有可能吗？

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

只有你应该像下面这样转换 Header 组件：

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

并且在 SearchBar 组件中将以下属性添加到您的输入中：

onFocus={this.props.onFocus}
onBlur={this.props.onBlur}

另外，您应该删除关于结果框的 CSS。

并且，您可以在以下沙箱中看到更新后的代码：

https://codesandbox.io/s/mmj46xkpo9 https://codesandbox.io/s/mmj46xkpo9