如何将数据从父组件传递到子组件并验证反应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

将验证功能写入父组件。使用道具将功能传递给儿童。