新しいコンポーネントをロードするonKeyPress - reactjs

Question

「Enter」ボタンを押したときに作成した新しいコンポーネントをロードしようとしています。私はonKeyPress関数を次のようにうまく実装しました。

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

私はコンソールログを正しく取得しますが、問題は私がEnterを押したときにコンポーネントをロードする方法です。あなたは何ができるか

Answer 1

は、コンポーネントあなたのためのルートを確立して、動的にどのようにインデックスにあなたのルーターの定義でルートを処理している？

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

Answer 2

ようthis.context.routerでルートを変更することですか名前のついたルートだけを持つのではなく、親のルートを持っていなくても子をレンダリングすると機能しないかもしれません。

Answer 3

例えば、私のインデックスが、これはその '/' を意味し、私のメインのアプリケーションコンポーネント（ルータの下にトップレベルルート）

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

この

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> 

ようになります。 Appコンポーネントからレンダリングされ、 '/'の後ろに宣言されたルートは、自分のページではなくappコンポーネントにレンダリングされます。