Formsy React 使用教程

Formsy React 使用教程

formsy-reactA form input builder and validator for React JS项目地址:https://gitcode.com/gh_mirrors/for/formsy-react

项目介绍

Formsy React 是一个用于构建和验证 React 表单的库。它提供了一个简单而强大的 API，使得创建复杂的表单变得容易。Formsy React 支持自定义输入组件，并且可以与多种 UI 库（如 Bootstrap 和 Material-UI）集成。

项目快速启动

安装

首先，你需要安装 Formsy React：

npm install formsy-react

创建一个简单的表单

以下是一个简单的示例，展示如何使用 Formsy React 创建一个表单：

import React from 'react';
import Formsy from 'formsy-react';
import { withFormsy } from 'formsy-react';

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

  changeValue(event) {
    this.props.setValue(event.currentTarget.value);
  }

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

export default withFormsy(MyInput);

const MyAppForm = React.createClass({
  getInitialState() {
    return { canSubmit: false };
  },

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

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

  submit(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>
    );
  }
});

export default MyAppForm;

应用案例和最佳实践

自定义输入组件

Formsy React 允许你创建自定义输入组件，这些组件可以与 Formsy 的验证机制无缝集成。例如，你可以创建一个自定义的文本输入组件：

import React from 'react';
import { withFormsy } from 'formsy-react';

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

  changeValue(event) {
    this.props.setValue(event.currentTarget.value);
  }

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

export default withFormsy(CustomTextInput);

表单验证

Formsy React 提供了多种内置的验证规则，如 isEmail、isNumeric 等。你也可以自定义验证规则：

import Formsy from 'formsy-react';

Formsy.addValidationRule('isPositiveNumber', (values, value) => {
  return value >= 0;
});

典型生态项目

formsy-react-components

formsy-react-components 是一个用于与 Bootstrap 集成的库，它提供了一些预构建的表单组件，使得使用 Bootstrap 和 Formsy React 变得更加容易。

formsy-material-ui

formsy-material-ui 是一个用于与 Material-UI 集成的库，它提供了一些预构建的表单组件，使得使用 Material-UI 和 Formsy React 变得更加容易。

通过这些生态项目，你可以更方便地构建出美观且功能强大的表单。

formsy-reactA form input builder and validator for React JS项目地址:https://gitcode.com/gh_mirrors/for/formsy-react