ReactJS - 输入组件数据传递

我正在编写我的第一个组件，但我在数据绑定方面遇到了问题

我想要的是在我的 LoginView 中获取字段的值，以便我可以在 handleSubmit 中将它们进一步传递到一个向后端发出请求的函数中。

以前写过这个没有组件的表单，但后来我决定通过将每个表单拆分为小组件来改进它。

问题是我不明白在LoginView和TextInput之间传递数据是如何工作的。

文本输入组件

import React, {PropTypes} from 'react'
import classNames from 'classnames/bind';
class TextInput extends React.Component {
  static propTypes = {
    name: PropTypes.string,
    placeholder: PropTypes.string,
    label: PropTypes.string,
    type: PropTypes.string,
    value: PropTypes.any
  }
  constructor(props) {
    super(props)
    this.state = {is_valid: true}
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event) {
    console.log(event, this.props)
    this.props.value = event.target.value
    console.log(this.props)
  }
  render() {
    var divClasses = classNames({
      'form-group': true,
      'has-danger': !this.state.is_valid
    })
    var inputClasses = classNames({
      'form-control': true,
      'form-control-danger': !this.state.is_valid
    })
    console.log(this.props.value)
    return (
      <div className={divClasses}>
        <label htmlFor={this.props.name}>{this.props.label}</label>
        <input type={this.props.type} className={inputClasses}
               id={'id_'+ this.props.name}
               placeholder={this.props.placeholder}
               name={this.props.name}
               value={this.props.value}
               onChange={this.handleChange}
        />
      </div>
    )
  }
}
export default TextInput

视图

import React from 'react'
import TextInput from 'components/TextInput'
import EmailInput from 'components/EmailInput'
import PasswordInput from 'components/PasswordInput'
export class LoginView extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      email: '',
      password: '',
      remember_me: false
    }
  }
  handleSubmit = (e) => {
    e.preventDefault()
  }
  handleChange = (e) => {
    console.log(e.target.name, e.target.value)
    var key = e.target.name
    var value = e.target.value.trim()
    var data = {}
    data[key] = value
    this.setState(data)
  }
  render() {
    console.log(this.state)
    return (
      <div className='row'>
        <div className='col-md-offset-4 col-md-4'>
          <form role='form' className='form form-horizontal' onSubmit={this.handleSubmit} noValidate="novalidate">
            <TextInput name='Email' label='Email' type='text' placeholder='Email' value={this.state.email} />
            <PasswordInput value={this.state.password} onChange={this.handleChange.bind(this)}/>
            <div className='checkbox'>
              <label><input type='checkbox' name='remmeber_me' onChange={this.handleChange}/> Keep me logged in</label>
            </div>
            <div className='clearfix'>
              <button className='btn btn-primary btn-lg btn-block' type='submit'>Login</button>
            </div>
          </form>
        </div>
      </div>
    )
  }
}
export default LoginView