React input focus event to display other component

Question

I was read some tutorial about this. They told me should using ref to do that. But It's very general.

Here is my problem: Basically in Header component include NavBar, SearchBar and ResultSearch component.

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

And In SearchBar component. Whenever I focused on input text. It emit an event and display ResultSearch component by any way (changing style, or ...).

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

Style in ResultSearch component. I was set display: none.

.results_search { display: none; }

I think ResultSearch will receive an event from SearchBar and set back display: block for ResultSearch component. Is possible?

How can I handle that? My Code here: https://codesandbox.io/s/3xv8xnx3z5

One solution is using redux and if you don't want to use redux you can define handler methods in header components and pass handler as props to SearchBar component and in Header component setState when clicked on searchBar and pass state to other components. Put your codes on codesandbox.io to help more. — Omid Nikrah
– Omid Nikrah, Commented Jun 22, 2018 at 2:09

Omid Nikrah · Accepted Answer · 2018-06-22 02:35:26Z

9

only you should convert Header component like following:

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

and also in SearchBar component add following attributes to your input:

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

also, you should remove your CSS about result box.

And, you can see the updated code on the following sandbox:

https://codesandbox.io/s/mmj46xkpo9

answered Jun 22, 2018 at 2:35

Omid Nikrah

2,4803 gold badges17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amin Paks · Accepted Answer · 2018-06-22 02:32:09Z

1

Still not sure what you're trying to achieve.

This is the way you can handle visibility of result of the search. Let me know if this isn't what you're looking for.

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

answered Jun 22, 2018 at 2:32

Amin Paks

2662 silver badges15 bronze badges

1 Comment

Thuan Nguyen Over a year ago

Thank @Amin Paks. Your handle's work for my case. But i keep more simple by just checking through state focus property.

Collectives™ on Stack Overflow

React input focus event to display other component

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related