加载新组件 onKeyPress - reactjs答案

【问题标题】：Load new a new component onKeyPress - reactjs加载新组件 onKeyPress - reactjs
【发布时间】：2017-04-03 05:52:44
【问题描述】：

当我按下“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 时如何加载组件。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你可以做的是为你的组件建立路由，然后用this.context.routerlike动态改变路由

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

【讨论】：

我收到一个错误，因为未定义错误“PropTypes”
更新后的答案有所改进。当我进入时，我可以看到 url 的变化。但是页面不会加载。如果我手动刷新页面，将加载相关页面。我该如何解决这个问题？
是的，我可以通过在我的 handleKeyPress 方法中添加这一行来解决这个问题。 'location.reload();'

【解决方案2】：

您如何处理索引中路由器定义中的路由？如果您没有父路由然后渲染它的子路由，而不是只有一堆命名路由，它可能不起作用。

【讨论】：

，像这样

【解决方案3】：

例如，我的索引应该是这样的

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 组件（Router 下的顶级 Route）

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

这意味着 '/' 是从 App 组件渲染的，并且在 '/' 之后声明的任何路由都将被渲染到应用组件中，而不是它自己的页面。

【讨论】：