@ cat- react / 窗体

一个简单而强大的库, 帮助创建有效的反应形式 。 这个项目的灵感来自 窗体反应。 。 。 .

安装

• 安装依赖 @cat-react/form
  (如: yarn add @cat-react/form 或者说 npm install @cat-react/form --save(中文(简体) )
• 导入组件为 import {Form, Input} from '@cat-react/form';

开始

您是否在寻找一种简单的方法, 用 React 创建有效的表格 ?

祝贺你! 你的搜索结束了,因为 @cat-react/form 提供了一种简单的方式来创建前端或后端验证的表格。 验证既可以是同步处理,也可以是同步处理,形式状态正在被实时刷新.

看看这个 实例 找出如何创造你的欲望.

<Form>
    <MyInput name="email"
             validations={{
                 isEmail: true,
                 isRequired: true
             }}/>
    <MyInput name="email_confirm"
             validations={{
                 isRequired: true,
                 equalsField: 'email'
             }}
             messages={{
                 isRequired: 'Please confirm your email address.',
                 equalsField: 'The email addresses do not match each other.'
             }}/>
</Form>

示例自定义文本输入

您可以在此看到一个自定义文本输入的例子, 显示您如何执行自己的输入 :

import React from 'react';
import {Input} from '@cat-react/form'

@Input
export default class BasicInput extends React.Component {
    onChange(event) {
        this.props.setValue(event.target.value);
    }

    getClassName() {
        let className = 'form-control';
        if (!this.props.isPristine()) {
            if (this.props.isValid()) {
                const isWarning = this.props.getMessages().length > 0;
                if (isWarning) {
                    className += ' warning';
                }
            } else {
                className += ' error';
            }
        }
        return className;
    }

    renderMessages() {
        let messages = [];
        if (!this.props.isPristine()) {
            messages = this.props.getMessages();
        }

        if (!messages || messages.length <= 0) {
            return null;
        }

        let className = 'errorText';
        if (this.props.isValid()) {
            className = 'warningText';
        }

        return <ul className={className}>{messages.map((message, i) => <li key={i}>{message}</li>)}</ul>;
    }

    render() {
        return (
            <div className="form-group">
                <label htmlFor={this.props.name}>{this.props.label} {this.props.isRequired() ? '*' : null}</label>
                <input type={this.props.type}
                       className={this.getClassName()}
                       id={this.props.name}
                       aria-describedby={this.props.name}
                       placeholder={this.props.placeholder}
                       value={this.props.getValue()}
                       onChange={this.onChange.bind(this)}
                       onBlur={this.props.touch}/>
                {this.renderMessages()}
            </div>
        );
    }
}

说明数字 : 你需要那个 bail-plugin-变形器 要使用的插件 @Input 装饰师. 如果您不想或无法将此插件添加到您的 Webpack 配置中, 您需要将 HOC 用作一个 函数( 如 connect() (原始内容存档于2018-10-12). HOC of Redux.

示例 export default Input(BasicInput)

见 Babel 文档 详细指南 如何在应用程序中添加装饰器.

捐款

该项目至少需要最新稳定的节点和npm版本. 你还需要在全球安装纱线.

两个简单的步骤 让你的本地机器运行的东西:

• 叉出还原
• 执行 yarn

您可以以 yarn run examples 和试验 yarn test。 。 。 .

如何建立一个发布

• 更新 CHANGELOG.md 与新版本相关的所有更改
• 更新 package.json
• 推动更改
• 本地创建项目 npm run build
• cd 输入 dist 文件夹并运行 npm publish --access public
• 起草新版本 Github 与《京都议定书》 CHANGELOG.md 文件

许可证

MIT 许可证

版权(c)2018年 催化器 GmbH