Javascript 将状态传递给其他组件

如果我的路由器路由设置如下：

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

有这样一个组件：

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

如何使用户名可用于全局范围？我是否必须通过路由器传递它，或者我可以用不同的方式定义它

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

我将如何做到这一点

---

谢谢。

您可以将该状态保存在集装箱组件中，也可以保存在您拥有路线的位置。例如：

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

---

或者开始使用库，例如，或者如果您的目标是一个更大的项目，它们将使您的应用程序状态不在React层中，这样您就可以将这些数据提供给组件树中没有直接关系的组件。

对于我来说，最好的方法是使用全局状态控制，如Flux/Redux

但您可以通过URL上的react路由器和参数实现类似的功能。我要做的是：

onClick提交函数 使用params重定向到其他路由 在其他页面访问您的用户名 示例如下：

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

---

<>请不要忘记在构造函数上绑定OnCLICKEY函数，以避免这个

的问题：你将ES6类符号与RecC.CeCalcLases助手方法调用混合，你可能想考虑一个更一致的方法……我真的很喜欢你提到MobX的事实。我永远不会知道那会存在。它看起来像一个非常酷的图书馆，迫不及待地想在早上玩它！谢谢，谢谢你的反馈。我很高兴你给我看了路由器。推送方法。那会派上用场的。在这方面会出现什么问题？您有特定的用例吗？特定的用例是在您想要的时候：1。做一个动作2。是否等待API回答3。在您的案例中，重定向到另一个包含或不包含用户名信息的页面。有时问题是，您不想在操作后立即重定向，而是存储用户名以备以后使用。在那种情况下是不可能的