用react来实现一个用户登录框问题

我现在用react来实现一个用户用户框的效果。
目前使用了三个组件，一个最外层的LoginForm组件，另两个是用户名和密码组件。

FormLogin
--- LoginUserName
--- LoginUserPassword

下一步要实现的是登录按钮点击功能，对此不知应该如何实现为好，如果获取两个组件的元素值（用户输入的用户名和密码）。然后再向后端服务器提交。。。最好有这方面的资料，自己找了实在是找不到.

源码如下：

/* @flow */
var LoginForm = React.createClass({
  handleClick: function() {
    console.log('submit');
  },
  render: function() {
    return (<div className="loginForm">
              <div className="eleItem">
                <label>登录名：</label><LoginUserName />
              </div>
              <div className="eleItem">
                <label>密&nbsp;码：</label><LoginUserPassword />
              </div>
              <div className="btnItem">
                  <input type="submit" name="button" id="button" value="提交" onClick={this.handleClick} />
              </div>
      </div>);
  }
});

var LoginUserName = React.createClass({
  getInitialState: function() {
    return {value: '登录用户名'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    var value = this.state.value;
    return <input type="text" name="username" value={value} placeholder="不能包含特殊字符" onChange={this.handleChange} />;
  }
});

var LoginUserPassword = React.createClass({
  getInitialState: function() {
    return {value: '登录密码'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    var value = this.state.value;
    return <input type="text" name="password" value={value} placeholder="六位数字密码" onChange={this.handleChange} />;
  }
});

ReactDOM.render(<LoginForm />,
    document.getElementById("content")
);

---

通过onChange方法把value告知外层，在controller里面获取到value后保存为‘私有变量’，提交的时候直接提交相应的变量

---

可以参照我这个项目，Qingcheng-react，如果对你有帮助的话，可以star这个项目

不建议LoginUserName 和 LoginUserPassword 这两个组件，如果不复用的话

var LoginForm = React.createClass({
    getInitialState: function() {
        return {
            username: "",
            password: "",
        };
    },
    handleChange: function(e) {
        var newState = {};
        newState[e.target.name] = e.target.value;
        this.setState(newState);
    },
    handleClick: function() {
        var data = {
            username : this.state.username,
            password : this.state.password,
        };
        $.ajax({...});
    },
    return (<div className="loginForm">
              <div className="eleItem">
                <label>登录名：</label>
                <input type="text" value={this.state.username} placeholder="不能包含特殊字符" onChange={this.handleChange} />
              </div>
              <div className="eleItem">
                <label>密&nbsp;码：</label>
                <input type="text" value={this.state.password} placeholder="六位数字密码" onChange={this.handleChange} />;
              </div>
              <div className="btnItem">
                  <input type="submit" value="提交" onClick={this.handleClick} />
              </div>
      </div>);
  }

如果不用那两个组件的话就照上面的写，改改就行了。如果需要那两个组建的话，只要把父组件的username和password值传给子组件，顺带handleChange也要传下去，子组建调用父组件的方法