web-dev-qa-db-ja.com

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

エラー：エラーが表示されるe.target is undefinedは親ストアのメール機能です

javascriptformsreactjsinputcomponents
14
Kayote

Reactの一方向データバインディングモデルは、子コンポーネントが親コンポーネントに値を返送できないことを意味します。明示的に許可されていない限り。 Reactこれを行う方法は、子コンポーネントにコールバックを渡すことです（ Facebookの「フォーム」ガイド を参照）。

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の「Lifting State Up」ガイド は、これを行う方法を学ぶための優れたリソースです。

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

40
Ian Emnace

親

import React, { Component } from 'react';
import Child from './child'
class Parent extends Component {
  state = {
    value: ''
  }
  onChangeValueHandler = (val) => {
    this.setState({ value: val.target.value })
  }
  render() {
    const { value } = this.state;
    return (
      <div>
        <p> the value is : {value} </p>
        <Child value={value} onChangeValue={this.onChangeValueHandler} />
      </div>
    );
  }
}

export default Parent;

子

  import React, { Component } from 'react';
  class Child extends Component {
  render() {
  const { value , onChangeValue } = this.props;
  return (
    <div>
      <input type="text"  value={value} onChange={onChangeValue}/> 
    </div>
  );
}
}
  export default Child;

ライブの例を見ることができます： https://codesandbox.io/s/two-way-binding-qq1o1?from-embed

0
Ali Mohammad