React - 子コンポーネントは値を親フォームに返すことができる

Question

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(
     <div className="pageContainer"> 

      <form action="" method="post"> 
      <InputField labelClass = "label" 
         labelText = "Username" 
         inputId = "signUp_username" 
         inputType = "email" 
         inputPlaceholder = "registered email" 
         inputClass = "input" /> 
      <Button btnClass = "btnClass" 
        btnLabel = "Submit" 
        onClickEvent = { handleSignUp } /> 
      </form> 
     </div> 
    ); 
    } 

    } 
); 

するか、それは推奨されません&私はいけませんフォーム内にカスタム子コンポーネントを作成しますか？

子コンポーネント=>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 <div className = ""> 
       <label htmlFor = {this.props.inputId} 
        className = {this.props.labelClass}> 
       {this.props.labelText} 
       </label> 
       <input id = {this.props.inputId} 
        type = {this.props.inputType} 
        onChange = {this.onUserInput} /> 
       <span className = {this.props.validationClass}> 
       { this.props.validationNotice } 
       </span> 
      </div>; 
    } 
} 

エラー：私は親storeEmailのFUNC上のエラーe.target is undefinedを取得します。

Answer 1

リアクションの一方向データ結合gモデルは、明示的に許可されていない限り、子コンポーネントは親コンポーネントに値を返すことができないことを意味します。これを行うリアクション方法は、コールバックを子コンポーネントに渡すことです（Facebook's "Forms" guide参照）。

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

    //... 

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

    //... 

    render() { 
    return (
     <Child 
     value={this.state.value} 
     onChangeValue={this.handleChangeValue} 
     /> 
    ); 
    } 
} 

class Child extends Component { 
    //... 

    render() { 
    return (
     <input 
     type="text" 
     value={this.props.value} 
     onChange={this.props.onChangeValue} 
     /> 
    ); 
    } 
} 

子コンポーネントのみを表示扱いながら親コンポーネントは、状態を扱うことに注意してください。 Facebook's "Lifting State Up" guideは、これを行う方法を学習するための優れたリソースです。

すべてのデータは親コンポーネント内に存在し、子コンポーネントはそのデータを更新する方法のみが与えられます（コールバックは小道具として渡されます）。問題が解決されました。親コンポーネントは必要なすべてのデータにアクセスできます（データは状態に格納されているため）。子コンポーネントは<input>タグなどの独自の要素にデータをバインドします。

Answer 2

あなたはそこからいくつかの関数を呼び出すことができますので、あなたが好き、あなたのInputFieldに「REF名」を追加することができますので、あなたがレフリーを使用してアクセスすることができます

<InputField 
    ref="userInput" 
    labelClass = "label" 
    labelText = "Username" 
    inputId = "signUp_username" 
    inputType = "email" 
    inputPlaceholder = "registered email" 
    inputClass = "input" /> 

：

this.refs.userInput.getUsernamePassword(); 

getUsernamePassword関数はInputFieldコンポーネントの内部にあり、戻り値で状態を設定してprops.handleSignUpを呼び出すことができます