Wie übertrage ich Daten von der Elternkomponente zur Kindkomponente und validiere Felder in react js material ui?

Question

Ich arbeite gerade an der Validierung in react js und ich verwende Material ui für die Validierung. Also habe ich eine gemeinsame Komponente, die ich alle Validierungslogik haben werde. Ich habe den Status in meiner gemeinsamen Komponente gesetzt, um alle Feldwerte zu erhalten, und ich brauche diese Werte in meiner Kindkomponente und ich möchte jedes Feld beim Klick auf die Schaltfläche submit handleSubmit() in der Kindkomponente validieren. Können Sie mir sagen, wie ich das erreichen kann? unter meinen Eltern Komponente:

export default class CommonTextBox extends React.Component { 

     constructor(props) { 
     super(props); 

     this.state = { 
      firstName:'', 
      email:'', 
      floatingLabel: '', 
     }; 
     this.handleChange = this.handleChange.bind(this); 
     } 
     handleChange(evt) { 
     if (this.props.name === 'a') { 
      this.setState({ firstName: evt.target.value }); 
     } else if (this.props.name === 'b') { 
      this.setState({ email: evt.target.value }); 
     } 
     } 
     render() { 
     return (
      <div> 
      <TextField maxLength='40' errorText='' floatingLabelText={this.state.floatingLabel} onChange={this.handleChange} /> 
      </div> 
     ); 
     } 
    } 

Below my child component: 

export default class PhysicianDetails extends React.Component { 
    constructor(props) { 
    // alert(1) 
    super(props); 
    this.state = { 
    }; 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 
    handleSubmit() { 
    } 
    render() { 
    return (
     <div> 
     <CommonTextBox name='a' /> 
     <CommonTextBox name='b' /> 
     <RaisedButton label='Save' onClick={this.handleSubmit} /> 
     </div> 
    ); 
    } 
} 

Answer 1

Schreiben Sie die Validierungsfunktion in der übergeordneten Komponente. Übergeben Sie die Funktion mithilfe von Requisiten an child.