0
ありがとうございました。フォームからメインアプリケーションに状態を渡す - 反応するJS
私はReactでアプリを作成しようとしています。ワークフローは、ユーザーが登録モーダルを確認することです。どこに名前とメールアドレスを追加するのか。
フォームを送信すると、フォームがメイン画面に表示され、名前が右上のアバター画像の横に表示されます。
が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>
)
}
});
は最終的に、私が欲しい私はこの
var routes = (
<Router history={createHistory()}>
<Route path="/" component={NewUserForm}/>
<Route path="/user/:userName" component={App}/>
</Router>
)
マイフォーム部品のようなものの効果にルータを反応させるの使用してい
ヘッダーコンポーネントにユーザー名と電子メールを渡して、上部に表示されるようにします。どのようにユーザーオブジェクトを渡すのですか？私は小道具を使って親から子のコンポーネントにデータを渡す方法を知っていますが、兄弟は持っていません。どこが間違っていますか？
のようなアーキテクチャからストアを使用することができ、単方向で反応させ、 '。あなたの新しい 'App'コンポーネントは子プロセスの状態を扱うことができます。 – Jack
コンポーネントを兄弟化して状態を共有する場合は、その状態を処理する親コンポーネントが必要です。フラックススタイルのデータストアを使用すると、すべてのコンポーネントが変更をサブスクライブします。 –