2017-03-27 23 views
1

私は現在、反応jsのバリデーションに取り組んでおり、バリデーションには材料uiを使用しています。だから私はすべての検証ロジックを持つ共通のコンポーネントを1つ持っています。 すべてのフィールド値を取得するために共通コンポーネントの状態を設定しました。子コンポーネントでこれらの値が必要です。子コンポーネントのボタンsubmitSubmit()をクリックして各フィールドを検証します。これを達成する方法を教えてください。私の親コンポーネント以下 :親コンポーネントから子コンポーネントにデータを渡し、反応jsマテリアルuiのフィールドを検証する方法は?

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> 
    ); 
    } 
} 

答えて

0

は、親コンポーネントで検証関数を記述します。小道具を使用して子に関数を渡します。

関連する問題