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

我希望在兄弟组件之间进行通信。其思想是用户名和密码字段是独立的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/>;

从“React”导入React；
变量LoginDataModel=require（'./LoginDataModel'）；
var LoginPage=React.createClass({
getInitialState:function（）{console.log（LoginDataModel）；返回LoginDataModel}，
render:function（）{
log（LoginDataModel.getUsername）；
返回(
);
}
});
var LoginForm=React.createClass({
render:function（）{
返回(
);
}
})
var UsernameInput=React.createClass({
getInitialState:函数（）{
返回{userValue:''}；
},
handleChange:函数（事件）{
this.setState（{userValue:event.target.value}）；
},
render:function（）{
返回(
用户名
);
}
});
var PasswordInput=React.createClass({
getInitialState:函数（）{
返回{passValue:''}；
},
handleChange:函数（事件）{
this.setState（{passValue:event.target.value}）；
},
render:function（）{
返回(
密码
);
}
});
var SubmitButton=React.createClass({
上下文类型：{
userValue:React.PropTypes.any，
passValue:React.PropTypes.any
},
渲染：函数（）{
返回(
活动项：{this.context.userValue}
);
}
})
导出默认值（）=>；

任何帮助都将不胜感激

编辑1：

---

忽略LoginDataModel，因为它是未使用的，因为我打算使用singleton，但决定不使用它，除非有人告诉我应该这样做……

一个非常简单的实现（我是React的初学者）是让包装器组件处理逻辑和状态；i、 e.让

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

以及按钮的

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

var SubmitButton=React.createClass({
onClick:function（）{
this.props.onClick&&this.props.onClick（）；
},
渲染：函数（）{
返回(
活动项：{this.context.userValue}
提交
);
}
})

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