javascript - react 输入焦点事件以显示其他组件

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 接收一个事件，并为 ResultSearch 组件设置 display: block。可能吗？

我该如何处理？我的代码在这里: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