React - 子组件可以将值发送回父表单

该InputField&Button是进入一个表单创建一个表单自定义组件.我的问题是如何将数据重新发送到表单,以便在按钮单击时,我可以使用数据(用户名和密码)在表单上激活ajax:

export default auth.authApi(
  class SignUpViaEmail extends Component{

    constructor(props){
      super(props);
      this.state = {
        email : "",
        password : ""
      };
      this.storeEmail = this.storeEmail.bind( this );
      this.storePassword = this.storePassword.bind( this );
    }

    storeEmail(e){
      this.setState({ email : e.target.value });
    }

    storePassword(e){
      this.setState({ password : e.target.value });
    }

    handleSignUp(){
      this.props.handleSignUp(this.state);
    }

    render(){
      return(
        


          

            
            
          
        
      );
    }

  }
);

或者不建议我不应该在表单中创建自定义子组件？

子组件=> InputField

import React,
       { Component } from "react";

export class InputField extends Component{

  constructor( props ){
    super( props );
    this.state = {
      value : ""
    };
    this.onUserInput = this.onUserInput.bind( this );
  }

  onUserInput( e ){
    this.setState({ value : e.target.value });
    this.props.storeInParentState({[ this.props.inputType ] : e.target.value });
  }

  render(){
    return  

              
                {this.props.labelText}
              
              
              
                { this.props.validationNotice }
              
            
;
  }
}

错误:我e.target is undefined在父storeEmail func上收到错误.

React的单向数据绑定模型意味着子组件无法将值发送回父组件,除非明确允许这样做.React的做法是将回调传递给子组件(参见Facebook的"表单"指南).

class Parent extends Component {
  constructor() {
    this.state = {
      value: ''
    };
  }

  //...

  handleChangeValue = e => this.setState({value: e.target.value});

  //...

  render() {
    return (
      
    );
  }
}

class Child extends Component {
  //...

  render() {
    return (
      
    );
  }
}

请注意,父组件处理状态,而子组件仅处理显示.Facebook的"提升状态"指南是学习如何做到这一点的好资源.

这样,所有数据都存在于父组件(处于状态)中,并且子组件仅被赋予更新该数据的方式(作为props传递的回调).现在您的问题得到了解决:您的父组件可以访问它所需的所有数据(因为数据存储在状态中),但您的子组件负责将数据绑定到它们各自的元素,例如标记.