javascript - React 版本的 ngForm

Question

我最近一直在使用 React，并且非常喜欢它，但我错过了一些我在其他框架中习惯的东西。 ngForm 中主要的一个来自 Angular，Angular 使用它来提供非常简单的表单验证。检查表单是否有效就像 vm.myForm.$valid 一样简单。

在 React 中，我发现自己编写了大量的样板文件来基本上复制我在 ngForm 中的内容。我想知道是否有用于表单验证的插件，如果没有，社区有首选的验证方式吗？

Answer 1

强烈推荐formsy-react ，使用这个库，您可以轻松自定义所有验证和错误消息。

那么你的代码就是，

 import Formsy from 'formsy-react';

  const MyAppForm = React.createClass({
    getInitialState() {
      return {
        canSubmit: false
      }
    },
    enableButton() {
      this.setState({
        canSubmit: true
      });
    },
    disableButton() {
      this.setState({
        canSubmit: false
      });
    },
    submit(model) {
      someDep.saveEmail(model.email);
    },
    render() {
      return (
        <Formsy.Form onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
          <MyOwnInput name="email" validations="isEmail" validationError="This is not a valid email" required/>
          <button type="submit" disabled={!this.state.canSubmit}>Submit</button>
        </Formsy.Form>
      );
    }
  });

这里是some examples和 API documents .