将状态从表单传递到主应用程序 - React JS答案

【问题标题】：Passing State from a form to the main application - React JS将状态从表单传递到主应用程序 - React JS
【发布时间】：2016-10-15 13:32:35
【问题描述】：

提前感谢您的帮助。

我正在尝试在 React 中创建一个应用程序。工作流程是用户看到一个注册模式。他们在哪里添加他们的姓名和电子邮件。

提交表单后，他们将被带到主屏幕，他们的名字显示在右上角的头像图像旁边。

我正在使用 React Router 来实现类似这样的效果

var routes = (
    <Router history={createHistory()}>
        <Route path="/" component={NewUserForm}/>
        <Route path="/user/:userName" component={App}/>
    </Router>
)

我的表单组件：

var NewUserForm = React.createClass({
    addNewUser: function(event) {
        event.preventDefault();
        var newUser = {
            name: this.refs.name.value,
            email: this.refs.email.value
        };
    },
    render: function() {
        return (
      <form className="new-user-form" ref="newUser" onSubmit={this.addNewUser}>
        <input type="text" ref="name" placeholder="Your Name"/>
        <input type="email" ref="email" placeholder="Your Email"/>
        <button type="submit">Submit</button>
      </form>
    )
  }
});

我的应用组件：

var App = React.createClass({
  getInitialState: function() {
    return {
      user: {} 
    }
  },
  render: function() {
    return (
      <div className="main-app-body">
        <Header user={this.state.user}></Header>
        <Sidebar></Sidebar>
      </div>
    )
  }

});

最后，我想将用户名和电子邮件传递给标题组件，以便它显示在顶部。如何传递用户对象？我知道如何使用道具将数据从父组件传递到子组件，但不使用兄弟姐妹。我哪里错了？

【问题讨论】：

我会将App 组件重命名为Main，然后在Main 和NewUserForm 周围包裹一个新的App 组件。您的新 App 组件可以处理其子级的状态。
如果你想让兄弟组件共享状态，你需要有一个父组件来处理状态。您可以使用通量样式的数据存储，所有组件都订阅更改。

标签： javascript reactjs components state

【解决方案1】：

React 是单向的，你可以使用 Flux 或 redux 等架构中的 store

【讨论】：