如何將數據從父組件傳遞到子組件並驗證反應js材質UI中的字段？

Question

我目前正在對js進行驗證，我正在使用材質ui進行驗證。所以我有一個共同的組件，我將擁有所有驗證邏輯。 我已經在我的公共組件中設置了狀態以獲取所有字段值，並且我需要這些值在我的子組件中，並且我希望驗證每個字段上的按鈕在子組件中提交handleSubmit（）。你能告訴我如何做到這一點。 低於我的父組件：

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

將驗證功能寫入父組件。使用道具將功能傳遞給兒童。