Question

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

我也无法使用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>
    );
  }
}

Answer 1

无状态组件意味着它无法存储状态。因此，您的州需要存储在其他地方。如今，首选的国家商店是Redux。

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

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

编辑好友：

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

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

1 个答案: