React js es6 validation

Question

jsと反応し、es6 jsバージョンのコーディングとマテリアルuiを使用しています。ここで、私のコードは、このような複数の入力ボックスを持つ

class Components extends React.Component { 


render() { 

    return (< div style = { 
      styles.root 
     } > 
     < 
     GridList cols = { 
      2 
     } 
     padding = { 
      1 
     } 
     cellHeight = { 
      40 
     } 
     style = { 
      styles.gridList 
     } > 
     < 
     GridTile cols = { 
      1 
     } 
     rows = { 
      2 
     } > < TextField type = "email" 
     floatingLabelText = "Email Id" 
     onChange = { 
      this.changeValue.bind(this, 'Email') 
     } 
     /></GridTile > 
     < 
     GridTile cols = { 
      1 
     } 
     rows = { 
      2 
     } > < TextField floatingLabelText = "Record Name" 
     onChange = { 
      this.changeValue.bind(this, 'recordname') 
     } 
     /></GridTile > 
     < 
     GridTile > < DatePicker hintText = "Start Date" 
     ref = "startdate" 
     mode = "landscape" 
     onChange = { 
      this.changeValue.bind(this, 'strtdate') 
     } 
     /></GridTile > 
     < 
     GridTile > < DatePicker hintText = "End Date" 

     mode = "landscape" 
     onChange = { 
      this.changeValue.bind(this, 'enddate') 
     } 
     /></GridTile > 
     < 
     GridTile cols = { 
      1 
     } 
     rows = { 
      3 
     } > < TextField floatingLabelText = "Sheet Type" 
     onChange = { 
      this.changeValue.bind(this, 'sheetname') 
     } 
     /></GridTile > 
     < 
     GridTile cols = { 
      1 
     } 
     rows = { 
      3 
     } > < /GridTile> </
     GridList > < 
     /div> 
    ); 
}} 

のように思える、私が必要とし、電子メールの検証を行う必要があります。 es5タイプでReact.PropTypes.numberを使った例をいくつか見ました。私はこれを行うための任意のアイデアを得ることはできません。

Answer 1

検証のために、パターンを小道具として受け入れる入力コンポーネントを作成することができます。検証が終了すると、その値は親コンポーネントFormで更新されます。私の公的機関でReactの例が利用可能です。私は説明のために関連するコンポーネントだけを強調しています。

1. Input component
2. Form component