按钮按下时反应同级组件通信（登录表单）

Question

我期望在兄弟组件之间进行通信。想到的是用户名和密码字段是单独的React组件，另一个按钮组件会请求这些组件的值并运行登录检查。到目前为止我所拥有的（不是用于任何形式的交流，而不是缺乏搜索）在下面。

import React from 'react'; 
var LoginDataModel = require ('./loginDataModel'); 

var LoginPage = React.createClass({ 
    getInitialState: function() { console.log(LoginDataModel); return LoginDataModel }, 
    render: function() { 
    console.log(LoginDataModel.getUsername); 
    return (
     <div className="container view-header"> 
     <LoginForm/> 
     </div> 
    ); 
    } 
}); 

var LoginForm = React.createClass({ 
    render: function() { 
    return (
     <form className="form-signin" name="loginForms"> 
     <UsernameInput/> 
     <PasswordInput/> 
     <SubmitButton/> 
     </form> 
    ); 
    } 
}) 

var UsernameInput = React.createClass({ 
    getInitialState: function() { 
    return {userValue: ''}; 
    }, 
    handleChange: function(event) { 
    this.setState({userValue: event.target.value}); 
    }, 
    render: function() { 
    return (
     <div className="form-group"> 
     <label htmlFor="inputEmail">Username</label> 
     <input autofocus className="form-control" id="inputEmail" placeholder="Username" name="loginUsername" required type="text" ref="usernameInput" value={this.state.userValue} onChange={this.handleChange}></input> 
     </div> 
    ); 
    } 
}); 

var PasswordInput = React.createClass({ 
    getInitialState: function() { 
    return {passValue: ''}; 
    }, 
    handleChange: function(event) { 
    this.setState({passValue: event.target.value}); 
    }, 
    render: function() { 
    return (
     <div className="form-group"> 
     <label htmlFor="inputPassword">Password</label> 
     <input autofocus className="form-control" id="inputPassword" placeholder="Password" name="loginPassword" required type="text" ref="passwordInput" value={this.state.passValue} onChange={this.handleChange}></input> 
     </div> 
    ); 
    } 
}); 

var SubmitButton = React.createClass({ 
    contextTypes: { 
     userValue: React.PropTypes.any, 
     passValue: React.PropTypes.any 
    }, 
    render: function() { 
     return (
     <div> 
      Active Item: {this.context.userValue} 
     </div> 
    ); 
    } 
}) 

export default() => <LoginPage/>; 

任何帮助将不胜感激！

编辑1：

忽略LoginDataModel，因为它是不用作我去一个单身，但反对决定，除非有人能告诉我我应该做的......

Answer 1

一个非常简单的实现（我是React的初学者）将让包装器组件处理逻辑和状态;即让LoginForm成为：

var LoginForm = React.createClass({ 
    getInitialState: function() { 
     return { 
      username: null, 
      password: null 
     } 
    }, 
    setUsername: function(username) { 
     this.setState({username: username}); 
    }, 
    setPassword: function(password) { 
     this.setState({password: password}); 
    }, 
    doLogin: function() { 
     // execute the login logic, based on this.state.username/password 
    }, 
    render: function() { 
     return (
      <form className="form-signin" name="loginForms"> 
       <UsernameInput onChange={this.setUsername} /> 
       <PasswordInput onChange={this.setPassword} /> 
       <SubmitButton onClick={this.doLogin} userValue={this.state.username} /> 
      </form> 
     ); 
    } 
}) 

及下属组件通过回调包装器进行通信，即onChange事件输入：

var UsernameInput = React.createClass({ 
    handleChange: function(event) { 
     this.props.onChange && this.props.onChange(event.target.value); 
    }, 
    render: function() { 
     return (
      <div className="form-group"> 
       <label htmlFor="inputEmail">Username</label> 
       <input autofocus className="form-control" id="inputEmail" placeholder="Username" name="loginUsername" required type="text" onChange={this.handleChange}></input> 
      </div> 
     ); 
    } 
}); 

var PasswordInput = React.createClass({ 
    handleChange: function(event) { 
     this.props.onChange && this.props.onChange(event.target.value); 
    }, 
    render: function() { 
     return (
      <div className="form-group"> 
       <label htmlFor="inputPassword">Password</label> 
       <input autofocus className="form-control" id="inputPassword" placeholder="Password" name="loginPassword" required type="text" onChange={this.handleChange}></input> 
      </div> 
     ); 
    } 
}); 

而且onClick事件的按钮：

var SubmitButton = React.createClass({ 
    onClick: function() { 
     this.props.onClick && this.props.onClick(); 
    }, 
    render: function() { 
     return (
      <div> 
       Active Item: {this.context.userValue} 
       <button onClick={this.onClick}>Submit</button> 
      </div> 
     ); 
    } 
})