反応の子どもの状態にアクセスするには？

Question

私はrender（）メソッドで自分のフォームのコンポーネントは次のようになります作られています子供たちは{this.props.children}として、ここでレンダリングされていることを

render() { 
    return (
     <form onSubmit={this.onSubmit} ref={(c)=>this._form=c}> 
      {this.props.children} 
     </form> 
    ) 
} 

がお知らせするので、ユーザーは次のようにこのコンポーネントを使用することができます。

<Form onSubmit={this.submit} > 
      <Input name={"name"} id="name" labelName="Ime" placeholder="Unesite ime" type="text" > 
       <Validation rule="required" message="Ovo je obavezno polje"/> 
      </Input> 
      <Input name={"email"} id="email" labelName="Email" placeholder="Unesite email adresu" type="text" > 
       <Validation rule="required" message="Ovo je obavezno polje"/> 
       <Validation rule="email" message="Ovo je nije valjana email adresa"/> 
      </Input> 
      <button type="submit" value="Pošalji" >Pošalji</button> 
     </Form> 

各Inputコンポーネントの状態をチェックして、その有効性を確認したいと思います。onSubmitMethod()。

checkValidity() { 
    var sefl = this; 
    this.props.children.map((child) => { 
     if (child.type.name === "Input") { 

//How to get state of child here 
     } 
    }); 
} 
onSubmit(event) { 
    event.preventDefault(); 
    var obj = serialize(this._form, { hash: true }); 
    const validityOfForm = true; //hardcoded for now 
    this.checkValidity(); 
    this.props.onSubmit(obj, validityOfForm); 

} 

Answer 1

私は同じようなことを行っています親の状態をフォーム要素の親コンポーネント内の子コンポーネントデータにアクセスする子プロセスの親の状態を渡すことによってプロジェクト内で実行されます。

あなたのケースでは、 this.state.variablenameではなくthis.props.state.variablenameのように。子コンポーネントの状態/データを制御できます。

this.prop.childrenを小道具として使用しているフォームコンポーネントから子どもに状態を送信することは簡単ではありません。下のリンクはこれを行うのに役立ちます。

https://stackoverflow.com/a/32371612/1708333

例：

親コンポーネント：

<FormFields 
    state={this.state} 
    _onChange={this._onChange} 
/> 

子コンポーネント

<Input 
    name="fieldname" 
    value={this.props.state.fieldname} 
    type="text" 
    label="Lable text" 
    validationMessage={this.props.state.validationMessages.fieldname} 
    onChange={this.props._onChange} 
/> 

詳細情報が必要な場合はお知らせください。

Answer 2

、refを入れて子供に、myinputを言うと、あなたがする必要がある場合は、子供の状態にアクセスするためにthis.refs.myinput.stateによってその状態を取得します。

ただし、refを置く前にこのthreadをご覧ください。より良いパターンがあります。

Answer 3

入力には、refが定義されている必要があります。それは簡単だ。入力フォームの親コンポーネント内で定義されているので しかし、（altoughtは、私はchild_owner._instanceを使用してFormコンポーネントの親にアクセスする必要があります（ので ）{this.props.children}の形のコンポーネント内にレンダリングされたコードの関連部分は今ある：。

checkValidity() { 
    var sefl = this; 
    var errorsCount = 0; 
    this.props.children.map((child) => { 

     if (child.type.name === "Input") { 
      var refs = child._owner._instance.refs; 
      var rules = refs[child.ref].state.validationRules; 
      var hiddenRules = refs[child.ref].state.validationRulesHidden; 
      if (_.filter(_.values(rules), (elem) => elem == true).length > 0 || _.filter(_.values(hiddenRules), (elem) => elem == true).length>0) { 
       errorsCount++; 
      } 
     } 

    }); 
    if (errorsCount == 0) { 
     return true; 
    } 
    return false; 
}