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

仍然不确定您要达到的目标。

这是您处理搜索结果可见性的方法。让我知道这是否不是您想要的东西。

https://codesandbox.io/s/7jvz31xr66

Answer 2

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

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

2 个答案: