Load new a new component onKeyPress - reactjs

Question

I'm trying to load a new component i have made when i press the button 'Enter'. I have implemented the onKeyPress function successfully as follows.

    class SearchBar extends Component {

        constructor(props) {

            super(props);

            this.handleKeyPress = this.handleKeyPress.bind(this);

        }

        handleKeyPress(e) {

            if (e.key === 'Enter') {

                console.log("load new page");

            }
        }

        render() {

            return (

                <div className="search_bar_div">

                    <div className="search_bar_internal_div">

                        {/* Search bar for desktop and tablets */}
                        <span className="Rev_logo">Revegator</span>

                        <input type="search" placeholder="Search here" className="search_bar"
                               onKeyPress={this.handleKeyPress}/>

                    </div>

                 </div>
}

I get the console log correctly but the problem i have is how to load the component when i press Enter.

Shubham Khatri · Accepted Answer · 2017-04-03T06:18:39.350

What you can do is to establish Routes for you component and then dynamically change the route with this.context.router like

class SearchBar extends Component {

        constructor(props) {

            super(props);

            this.handleKeyPress = this.handleKeyPress.bind(this);

        }


        handleKeyPress(e) {

            if (e.key === 'Enter') {

                console.log("load new page");
                this.context.router.push('/home');
            }
        }

        render() {

            return (

                <div className="search_bar_div">

                    <div className="search_bar_internal_div">

                        {/* Search bar for desktop and tablets */}
                        <span className="Rev_logo">Revegator</span>

                        <input type="search" placeholder="Search here" className="search_bar"
                               onKeyPress={this.handleKeyPress}/>

                    </div>

                 </div>
              )
       }
}


SearchBar.contextTypes = {
  router: React.PropTypes.func.isRequired
};

There's an improvement in your updated answer. When i enter, i can see the url changes. But the page won't load. If i refresh the page manually, the related page will load. How do i fix this? — CraZyDroiD, Apr 03 '17 at 06:52
Yes i was able to solve this problem by adding this line in my handleKeyPress method. 'location.reload();' — CraZyDroiD, Apr 03 '17 at 11:27

score 0 · Answer 2 · answered Apr 03 '17 at 06:58

0

How are you handling the route in your Router definitions in the index? It might not work if you don't have a parent route that then renders it's children, rather than having just a bunch of named routes.

answered Apr 03 '17 at 06:58

Michael Myers

133
1
10

, like this – CraZyDroiD Apr 03 '17 at 07:00

score 0 · Answer 3 · answered Apr 03 '17 at 07:05

for example, my index would look like this

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory}>
      <Route path='/' component={App}>
        <IndexRoute component={Welcome} />
        <Route path='/signin' component={SignIn} />
        <Route path='/signout' component={SignOut} />
        <Route path='/register' component={SignUp} />
        <Route path='/map' component={Map} />
        <Route path='/dashboard' component={RequireAuth(Dashboard)} />
        <Route path='/admin' component={RequireAdmin(Admin)} />
        <Router path='*' component={Welcome} />
      </Route>
</Router>

with my main App component (the top level Route under Router)

render() {
return (
  <div>
  <Header />
    {this.props.children}
  </div>
)
}

this means that '/' is rendered from the App component, and any route declared after the '/' will be rendered INTO the app component, instead of it's own page.

Load new a new component onKeyPress - reactjs

3 Answers3

Linked