this.props.children不包含子方法

Question

import React from 'react'; 
import {render} from 'react-dom'; 

class Form extends React.Component { 
    constructor(props) { 
     super(props); 
     this.validate = this.validate.bind(this); 
    } 

    componentDidMount() { 

    } 

    validate() { 
     this.props.children.map((field)=> { 
      field.validate(); 
     }); 
    } 

    render() { 
     return (
      <form className={this.props.className}> 
       {this.props.children} 
      </form> 
     ); 
    } 
} 

export default Form; 

以上是Form.jsx

import React from 'react'; 
import '../form.css'; 

class TextField extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      valid: true 
     }; 
     this.validate = this.validate.bind(this); 
    } 

    validate() { 
     if (!!this.props.required) { 
      if (this.refs.field.value.trim().length === 0) { 
       this.setState({ 
        valid: false 
       }); 
       return false; 
      } else { 
       this.setState({ 
        valid: true 
       }); 
       return true; 
      } 
     } 
     return true; 
    } 

    setValue(event) { 
     if (this.validate()) { 
      this.props.setValue(this.props.name, event.target.value); 
     } 
    } 

    render() { 
     var input = (
      <span className={this.state.valid ? null : 'field-invalid'}> 
        <input ref="field" type="text" name={this.props.name} placeholder={this.props.placeholder} 
          onBlur={this.setValue.bind(this)}/> 
      </span> 
     ); 
     var field = input; 
     if (this.props.label) { 
      field = (
       <div className="row"> 
        <label className={"col-3 align-r" + (!!this.props.required ? " field-required" : "")}> 
         {this.props.label} 
        </label> 
         <span className="col-6"> 
          {input} 
         </span> 
       </div> 
      ); 
     } 

     return field; 
    } 
} 

export default TextField; 

這是一個領域，包含驗證方法。但是這種方法不能從Form.jsx this.props.children訪問。

另一個父包含

<Form ref={(form)=> {this.form = form;}} className="label-input-group"> 
    <TextField label="Vehicle Owner" required={true} name="owner"/> 
</Form> 

驗證功能是未定義和投擲錯誤。 this.props.children沒有更新後，在父母的孩子登上我認爲。任何方式使它工作？

Answer 1

我不知道這是一個好主意，但你可以做這樣的事情：

// Form 
constructor(props) { 
    super(props); 
    this.validate = this.validate.bind(this); 
    this.childrenInstances = []; 
    this.props.children.forEach(field => { 
    field.ref = inst => this.childrenInstances.push(inst); 
    }); 
} 

validate() { 
    this.childrenInstances.forEach(field => { 
    field.validate(); 
    }); 
}