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

Question

我读了一些关于这个的教程。他们告诉我应该使用 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

Answer 1

只有你应该像下面这样转换 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