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

Creating a registration form using Stateless Components?

本文关键字：注册 注册表 表单 创建 组件 状态      更新时间：2023-09-26

有人可以给我看如何使用无状态组件构建表单的示例代码/解释吗？

我也找不到使用 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>
    );
  }
}

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

不确定您是否熟悉 Redux。如果没有，我建议观看非常著名的丹·阿布拉莫夫（Redux创作者）Egghead.io 系列。

如果你熟悉Redux是如何实现FLUX模式的，你可以把你的状态（name和school）放到Redux存储中。此状态将由 Redux 操作更新。这些函数将通过props和状态更新传递到组件中。

编辑 2017-05：

我们开始使用名为 redux-form 的库来处理 React+Redux 应用程序中的表单。它消除了很多布勒板，非常可测试。所以我肯定会推荐使用它。

相关文章：