@a2software/formsy-react 中文文档教程

Question

formsy-react

This fork

它有这些 PR：

• https://github.com/formsy/formsy-react/pull/126

React 的表单输入构建器和验证器。

Quick Start	API	Examples

Background

christianalfoni 写了一篇关于表单和 React 验证的文章，用 React JS 确定验证，结果就是这个组件。

主要概念是表单、输入和验证在开发人员和项目之间的完成方式非常不同。 这个 React 组件旨在成为灵活性和可重用性之间的“最佳平衡点”。

如果您正在寻找 v0.x 或旧问题，该项目最初位于 https://github.com/christianalfoni/formsy-react。

What You Can Do

1. Build any kind of form element components. Not just traditional inputs, but anything you want, and get that validation for free
2. Add validation rules and use them with simple syntax
3. Use handlers for different states of your form. (onError, onSubmit, onValid, etc.)
4. Pass external errors to the form to invalidate elements (E.g. a response from a server)
5. Dynamically add form elements to your form and they will register/unregister to the form

Install

yarn add formsy-react react react-dom 并与 webpack、browserify 等一起使用。

Quick Start

1. Build a Formsy element

// MyInput.js
import { withFormsy } from 'formsy-react';
import React from 'react';

class MyInput extends React.Component {
  constructor(props) {
    super(props);
    this.changeValue = this.changeValue.bind(this);
  }

  changeValue(event) {
    // setValue() will set the value of the component, which in
    // turn will validate it and the rest of the form
    // Important: Don't skip this step. This pattern is required
    // for Formsy to work.
    this.props.setValue(event.currentTarget.value);
  }

  render() {
    // An error message is returned only if the component is invalid
    const errorMessage = this.props.getErrorMessage();

    return (
      <div>
        <input
          onChange={this.changeValue}
          type="text"
          value={this.props.getValue() || ''}
        />
        <span>{errorMessage}</span>
      </div>
    );
  }
}

export default withFormsy(MyInput);

withFormsy 是一个 Higher-Order Component 向 MyInput 公开额外的道具。 请参阅 API 文档以查看道具的完整列表。

2. Use your Formsy element

import Formsy from 'formsy-react';
import React from 'react';
import MyInput from './MyInput';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.disableButton = this.disableButton.bind(this);
    this.enableButton = this.enableButton.bind(this);
    this.state = { canSubmit: false };
  }

  disableButton() {
    this.setState({ canSubmit: false });
  }

  enableButton() {
    this.setState({ canSubmit: true });
  }

  submit(model) {
    fetch('http://example.com/', {
      method: 'post',
      body: JSON.stringify(model)
    });
  }

  render() {
    return (
      <Formsy onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
        <MyInput
          name="email"
          validations="isEmail"
          validationError="This is not a valid email"
          required
        />
        <button type="submit" disabled={!this.state.canSubmit}>Submit</button>
      </Formsy>
    );
  }
}

此代码生成一个带有提交按钮的表单，该按钮将在使用有效电子邮件提交表单时运行 submit 方法。 只要输入为空（必需）并且值不是电子邮件（isEmail)。 在验证错误时，它将显示消息：“这不是有效的电子邮件”。

Formsy component packages

• https://github.com/twisty/formsy-react-components, Bootstrap 3 compatible form fields
• https://github.com/zabute/formsy-semantic-ui-react, Semantic UI form fields
• https://github.com/gogoair/react-formsy-combo-select, wrapper for https://github.com/gogoair/react-combo-select
• https://github.com/rojobuffalo/formsy-material-ui, Material-UI form fields (out of date, for formsy-react 0.x)

Contribute

• Fork repo
• yarn
• yarn examples runs the development server on localhost:8080
• yarn test runs the tests

Changelog

查看发布

License

麻省理工学院许可证 (MIT)

版权所有 ( c) 2014-2016 PatientSky A/S