使用無狀態組件創建註冊表單？

有人可以告訴我關於如何使用無狀態組件構建表單的示例代碼/說明嗎？使用無狀態組件創建註冊表單？

我也無法找到一個使用refs的Material UI窗體示例。

注意：我正在使用Material UI組件。

這是我目前的創建形式：

class App extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     name: '', 
     school: '', 
     }; 
} 


    /*in order to access state from within function, I had to bind this when I made 
    the call to submitCandidate i.e. onClick={this.submitCandidate.bind(this)} 
    */ 
    submitCandidate(event){ 
    event.preventDefault(); 
    //assign the form fields to candidates object 
    var newCandidate = { 
     name: this.state.name, 
     school: this.state.school, 
     date: this.state.date 
    } 
    //inserts candidates object to database 
    Candidates.insert(newCandidate); 

    render() { 
    return (
     <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}> 
     <div> 
     <TextField 
      hintText={"Enter Your Name"} 
      floatingLabelText={"Name"} 
      value={this.state.name} 
      onChange={e => this.setState({ name: e.target.value })} 
     /> 
     <TextField 
      hintText={"Enter Your School"} 
      floatingLabelText={"School"} 
      value={this.state.school} 
      onChange={e => this.setState({ school: e.target.value })} 
     /> 

     <RaisedButton type="submit" label="Submit" onClick={this.submitCandidate.bind(this)} /> 

      </div> 
     </MuiThemeProvider> 
    ); 
    } 
}

來源

2016-07-16 Yonathan Dejene

而不是依賴'onChange'處理程序，您可以在您的輸入中使用'ref'，並在提交時立即收集所有值 - https://facebook.github.io/react/docs/more- about-refs.html – Deryck

@Deryck不幸的是，無狀態函數不支持引用 –

無狀態組件意味着它不能存儲的狀態。所以你的狀態需要存儲在別的地方。目前首選的州商店是Redux。

不確定您是否熟悉Redux。如果不是，我建議觀看insanely famous Dan Abramov's (Redux creator) Egghead.io series。

如果您熟悉Redux如何實現FLUX模式，則可以將狀態（name和school）置於Redux存儲中。此狀態將由Redux操作更新。這些功能將通過props傳遞到您的組件並更新到狀態。

編輯2017-05：

我們開始使用庫調用redux-form處理的形式作出反應+終極版的應用程序。它消除了很多電解板，是非常可測試的。所以我肯定會推薦使用它。

來源

2016-07-16 13:28:38 luboskrnac

使用無狀態組件創建註冊表單？

回答

相關問題