React js es6驗證

新的反應js和我使用es6 js版本的編碼和材料ui。在這裏，我的代碼看起來像React js es6驗證

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的示例。我無法做到這一點。

來源

2016-07-26 sibi

嗨！你可以縮進你的代碼嗎？ –

Hi @ F.Kauder編輯了代碼，只是看看** TextField **這些是需要驗證required/email等的輸入字段。 – sibi

這不是縮進。這裏有一個指導知道必須如何組織和縮進你的代碼（https://web-design-weekly.com/2015/01/29/opinionated-guide-react-js-best-practices-conventions/），這裏是一個React代碼的真實例子（https://github.com/kriasoft/react-starter-kit/blob/master/src/components/App/App.js）。 –

對於驗證，可以創建一個輸入組件，它將接受該模式作爲道具。驗證被觸發後，值將在父組件Form中更新。 React的一個例子可以在我的公開倉庫中找到 - nyanam。我只強調了相關組件的說明。

來源

2016-07-26 15:55:54 vijayst

React js es6驗證

回答

相關問題