Question

提前感谢您的帮助。

我正在尝试在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>
    )
  }

});

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

Answer 1

React是单向的，你可以使用像flux或redux这样的架构存储

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

1 个答案: