Question

如果我对路由器路由做出反应设置如下：

<Router history={hashHistory}>
    <Route path='/' component={Home}>
        <Route path='/name' component={Name} />
        <Route path="/level" component={Level} />
        <Route path="/level1" component={Level1} />
        <Route path="/level2" component={Level2} />
        <Route path="/result" component={Result} />
    </Route>
</Router>

并有一个这样的组件：

import React, { Component } from 'react'

class Name extends Component {
    getInitialState() {
        return { username: '' }
    },
    onUpdateUser: function (e) {
        this.setState({ username: e.target.value })
    },
    render() {
        return (
            <div className="row">
              <div claassName="col-md-12">
                <div className="nameBox">
                  <form className="form-inline" onSubmit={}>
                    <input type="text" className="form-control" placeholder="Desiered Username" onChange={this.onUpdateUser} value={this.state.username} />
                    <button type="submit" className="btn btn-success">Submit</button>
                  </form>
                </div>
              </div>
            </div>
        )
    }
}

如何将username提供给全球范围？我是否必须通过路由器传递它，还是我可以用不同的方式定义它？

基本上一旦设置了用户名，我希望onSubmit将其带到/ level路由并使用用户名。

我将如何做到这一点？

感谢。

Answer 1

您可以将该状态保存在容器组件中（可能是您拥有路由的地方）.Ex。：

import React, { Component } from 'react'

class Container extends Component {
    constructor() {
      this.state = {username: ''};
    }

    updateUserName = (username) => {
      this.setState({username});
    }

    render() {
     return <Router history={hashHistory}>
        <Route path='/' component={Home}> 
            <Route path='/name' component={() =><Name updateUserName ={this.updateUserName}/>} />
            <Route path="/level" component={Level} />
            <Route path="/level1" component={Level1} />
            <Route path="/level2" component={Level2} />
            <Route path="/result" component={Result} />
        </Route>
    </Router>
}
}

然后在你的组件中：

import React, { Component } from 'react'

class Name extends Component {
    onUpdateUser: function (e) {
        this.props.updateUserName(e.target.value);
    },
    render() {
        return (
            <div className="row">
              <div claassName="col-md-12">
                <div className="nameBox">
                  <form className="form-inline" onSubmit={}>
                    <input type="text" className="form-control" placeholder="Desiered Username" onChange={this.onUpdateUser} value={this.state.username} />
                    <button type="submit" className="btn btn-success">Submit</button>
                  </form>
                </div>
              </div>
            </div>
        )
    }
}

或者，如果你的目标是更大的项目，那么就开始使用像Redux或MobX这样的库，他们会将你的应用状态保留在你的React层之外，这样你就可以将这些数据提供给组件树中没有直接相关的组件。

Answer 2

对我来说，最好的方法是全局状态控制（如Flux / Redux）。

但是您可以在网址上与react-router和params达成类似的效果。我会做的是：

onClick提交功能
使用参数
在其他页面上访问您的用户名

以下示例：

onClickFunction() {
  router.push({
    pathname: '/level1/' + this.state.username
  })
}
render() {
        return (
            <div className="row">
              <div claassName="col-md-12">
                <div className="nameBox">
                  <form className="form-inline" onSubmit={}>
                    <input type="text" className="form-control" placeholder="Desiered Username" onChange={this.onUpdateUser} value={this.state.username} />
                    <button type="submit" className="btn btn-success" onClick={ onClickFunction }>Submit</button>
                  </form>
                </div>
              </div>
            </div>
        )
    }

在你身上，你应该做那样的事情：

<Route path="/level/:username" component={Level} />

不要忘记在构造函数上绑定onClickFunction以避免出现 this

的问题

将状态传递给其他组件

2 个答案: