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

有人能给我演示一下如何使用无状态组件构建表单的示例代码/说明吗

我也找不到使用refs的材质UI表单示例

注意：我使用的是材质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>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
学校：''，
};
}
/*为了从函数内部访问状态，我必须在创建
对submitCandidate的调用，即onClick={this.submitCandidate.bind（this）}
*/
提交条件（事件）{
event.preventDefault（）；
//将表单字段指定给候选对象
var newCandidate={
名称：this.state.name，
学校：这所州立学校，
日期：this.state.date
}
//将候选对象插入数据库
候选人。插入（新候选人）；
render（）{
返回(
this.setState（{name:e.target.value}）}
/>
this.setState（{school:e.target.value}）
/>
);
}
}

无状态组件意味着它无法存储状态。因此，您的状态需要存储在其他地方。现在首选的状态存储是Redux

不确定您是否熟悉Redux。如果不是，我建议看

如果您熟悉Redux是如何实现FLUX模式的，您可以将您的状态（

name

和

school

）放入Redux存储中。此状态将由Redux操作更新。这些函数将通过

props

以及状态更新传递到组件中

编辑2017-05:

---

我们开始在React+Redux应用程序中使用用于处理表单的库。它消除了很多BoilerPlate，是非常可测试的。因此，我绝对建议使用它。

与依赖

onChange

处理程序不同，您可以在输入上使用

ref

，并且在提交时一次收集所有值-@Deryck不幸的是，无状态函数不支持refs