使用无状态组件创建注册表单？

有人可以告诉我关于如何使用无状态组件构建表单的示例代码/说明吗？使用无状态组件创建注册表单？

我也无法找到一个使用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

使用无状态组件创建注册表单？

回答

相关问题