react-serial-forms, 专门为响应而构建的高性能表单库

分享于 

12分钟阅读

GitHub

  繁體 雙語
A high performance form library built specifically for React using persistent immutable data.
  • 源代码名称:react-serial-forms
  • 源代码网址:http://www.github.com/LevInteractive/react-serial-forms
  • react-serial-forms源代码文档
  • react-serial-forms源代码下载
  • Git URL:
    git://www.github.com/LevInteractive/react-serial-forms.git
    Git Clone代码到本地:
    git clone http://www.github.com/LevInteractive/react-serial-forms
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/LevInteractive/react-serial-forms
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    串行表单

    警告警告: 不再维护

    我们将不再维持这个 MODULE,以更倾向于一个类似于传奇redux形式的something。 如果你有任何输入或者想法,请在这里回复 抱歉,谢谢你 !

    这个库是对React形式的轻量级抽象,它允许针对各种类型的数据架构定制布局。 串行表单通过创建表示输入本身的输入值的序列化对象来解耦它生成的数据。 这种关注点分离使得使用第三方组件( 如 Bootstrap响应小部件或者你自己的定制组件变得容易。 例如可以创建包含多个 <input> 元素的复杂组件,这些元素在序列化对象中产生一个结果,实质上是一个字段。

    串行表单旨在完成以下目标:

    演示

    厨房接收器

    这里示例演示一个非常基本的窗体,带有验证。repeater字段和撤消按钮。

    安装

    npm install react-serial-forms

    var SerialForms = require('react-serial-forms');

    ES6

    import SerialForms from 'react-serial-forms';

    或者更好,只要得到你需要的东西:

    import {
     BasicForm,
     InputField,
     SelectField,
     TextareaField} from'react-serial-forms'

    浏览器

    将( 缩小或者非 minfied ) 中的一个文件包含在安装的模块的dist/目录中。

    鸟和蜜蜂

    串行表单有 3个基本方面:

    • 字段更改异步检查值的验证值。
    • 通过对数据的命名约定可以使你能够指定数据的格式,从而使你可以在创建表单的过程中对数据进行
    • 你不应该使用预制的列或者行限制 只要用你想要的任何前端技术来构建你想要的形式。

    在不扩展序列形式的情况下,字段非常基本。

    • 输入 <InputField/>
    • Textarea <TextareaField/>
    • SelectField <SelectField/>

    这些组件除本机( 反作用力) 组件的所有属性外,还添加了一个 validationmessages 属性,用于指定字段的验证方式。

    唯一真正的要求是输入组件必须位于表单组件内。

    输入输入的状态

    这些将显示为组件上的类。

    • fresh: 新构造还没有验证或者更改。
    • valid: 经过 validation(s)。
    • invalid: 没有通过 validation(s)。

    验证

    validation 属性上指定了 Vaidation。 目前,包括以下确认器:

    • 必选
    • 数字
    • 邮件

    通过逗号分隔,可以一次应用多个。 例如:

    <InputFieldvalidation='required'name='full_name'/>
    <InputFieldvalidation='required,email'name='email'type='email'/>
    <InputFieldvalidation='required,numeral'name='zip'type='number'/>
    <InputFieldvalidation='required,numeral'name='other-number'type='text'/>
    自定义验证消息

    为特殊的messages 属性提供一个对象,以便为任何验证器定制验证消息。

    /** * Format: * <validator name>: <message> * * @type{object}*/let messages = {
     required:'I am a custom message for the required validator.'}<InputField validation='required' name='full_name' messages={messages} />
    自定义验证程序

    验证器的100%位异步为 v2.0 !

    // Some file for custom validators used throughout application...import { validation } from'react-serial-forms';validation.registerValidator({
     name:'unique_username',
     determine:function(value, pass, fail) {
     someAsyncRequest(value, (res) = {
     if (res.ok) {
     pass();
     } else {
     fail();
     }
     });
     },
     message:'Username is taken.'});// Implementation.<InputField type='text' validation='unique_username' name='username'/>

    命令行序列化

    序列化基于命名约定。 这样就可以轻松地在组件中创建复杂的数据结构,而无需大量的post提交处理。 因此,节省你大量的时间。

    • name="my-title" = {"my-title":"<value>" }
    • name="fruits[n]" = {"fruits": ["<value>","<value>",.. .] }
    • name="fruits[0][name]" = {"fruits": [{"name":"<value>"}] }
    • 等等,你可以无限地嵌套数组和对象。

    你将更希望获得序列化的对象 onSubmit

    onSubmit(e) {
     let theform =this.refs.myform; // Grab from the refs.theform.validate((errors) {
     // Errors will be either false or an array of errors for the failed fields.// Perhaps do something with theform.serialize() here. });
    }
    电子邮件编号

    type='number' 用于输入字段时,数字将为实数整数和浮点值。 否则,它们将是字符串所建议的类型- 文本。

    电子邮件文件

    <InputField type='file'/>

    文件的值将是实际的files 对象。 这仅仅是新添加的文件的情况。 否则,无论值属性设置为什么。 档案里的NAME 可能是。

    空值

    空值始终为 null

    选择字段

    应使用对象集合指定选项:

    constchoices= [
     { text:'- Select Something -', value:null },
     { text:'Option 1', value:'option_1' },
     { text:'Option 2', value:'option_2' }
    ];<SelectField options={choices} />

    如果选择字段具有 multiple={true},则该值将为 array。

    提供默认的

    只需将预填充值传递给 value 属性。

    扩展

    扩展这个库是它的主要功能之一。 请做。

    扩展复杂第三方组件。

    这里是一个例子,它是一个扩展的日期选取器( )。 使用"主机"隐藏输入技术允许我们处理任何类型的组件- 不管它是否返回SyntheticEvent或者。

    :创建自定义窗体的自定义窗体的示例。
    importReactfrom'react';import { FormBase } from'react-serial-forms';import { Grid, Row, ButtonInput, Col } from'react-bootstrap';exportdefaultclassBootstrapFormextendsFormBase {
     constructor(props) {
     super(props);
     }
     render() {
     return (
     <form onSubmit={this.props.onSubmit} method={this.props.method}><Grid> {this.props.children}
     <Row><Col xs={12}><ButtonInput type='submit' bsStyle='primary' value={this.props.submitText} /></Col></Row></Grid></form> );
     }
    }

    让我们做一个表格。

    import {
     BasicForm,
     InputField,
     SelectField,
     TextareaField} from'react-serial-forms'constoptions= [
     { text:'- Select Something -', value:null },
     { text:'Rollerblading', value:'rollerblading' },
     { text:'Fishing', value:'fishing' },
     { text:'Camping', value:'camping' },
     { text:'Reading', value:'reading' }
    ];constform= (
     <BasicForm><InputField name='title' validation='required'/><div className='simpleList-numbered'><InputField value='garlic' name='veges[0]'/><InputField value='pepper' name='veges[3]'/><InputField value='avocado' name='veges[2]'/><InputField value='carrot' name='veges[1]'/></div><div className='person'><InputField value='john' name='people[0][first_name]' validation='required'/><InputField value='doe' name='people[0][last_name]' validation='required'/><SelectField multiple={true} value={['camping', 'fishing']} name='people[0][hobbies]' options={options} validation='required'/><div className='books'><div className='book'><InputField value='devil in the white city' name='people[0][books][0][title]'/><InputField type='number' value='2003' name='people[0][books][0][year]'/></div><div className='book'><InputField value='react' name='people[0][books][1][title]'/><InputField type='number' value='2011' name='people[0][books][1][year]'/></div></div></div><div className='person'><InputField value='crazy' name='people[1][first_name]' validation='required'/><InputField value='tom' name='people[1][last_name]' validation='required'/><SelectField multiple={true} value={['reading', 'rollerblading']} name='people[1][hobbies]' options={options} validation='required'/><div className='books'><div className='book'><InputField value='1984' name='people[1][books][0][title]'/><InputField type='number' value='1950' name='people[1][books][0][year]'/></div><div className='book'><InputField value='dune' name='people[1][books][1][title]'/><InputField type='number' value='1963' name='people[1][books][1][year]'/></div></div></div><InputField name='submit' type='submit' value='Submit'/></BasicForm>);

    将自动创建类似这样的序列化对象:

    {
     "title": "My Title",
     "veges": [
     "garlic",
     "carrot",
     "avocado",
     "pepper" ],
     "people": [
     {
     "first_name": "john",
     "last_name": "doe",
     "hobbies": [
     "camping",
     "fishing" ],
     "books": [
     {
     "title": "devil in the white city",
     "year": 2003 },
     {
     "title": "react",
     "year": 2011 }
     ]
     },
     {
     "first_name": "crazy",
     "last_name": "tom",
     "hobbies": [
     "reading",
     "rollerblading" ],
     "books": [
     {
     "title": 1984,
     "year": 1950 },
     {
     "title": "dune",
     "year": 1963 }
     ]
     }
     ]
    }
    插件开发
    • npm install
    • npm test
    • 确保你的IDE具有eslint能力 !

    for  form  react  HIG  PERF  spec  
    相关文章