bee-form
react bee-form component for tinper-bee
依赖
- react >= 15.3.0
- react-dom >= 15.3.0
- prop-types >= 15.6.0
使用方法
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Form from '../../src';
import FormControl from 'bee-form-control';
import Label from 'bee-label';
import Button from 'bee-button';
const FormItem = Form.FormItem;
class Demo2 extends Component {
submit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (err) {
console.log('校验失败', values);
} else {
console.log('提交成功', values)
}
});
}
render() {
const { getFieldProps, getFieldError } = this.props.form;
return (
<div className="demo2">
<Form >
<FormItem>
<Label>用户名：</Label>
<FormControl placeholder="请输入用户名"
{...getFieldProps('username', {
validateTrigger: 'onBlur',
rules: [{
required: true, message: '请输入用户名',
}],
}) }
/>
<span className='error'>
{getFieldError('username')}
</span>
</FormItem>
<FormItem>
<Label>密码：</Label>
<FormControl placeholder="请输入密码" type='password'
{...getFieldProps('password', {
validateTrigger: 'onBlur',
rules: [{
required: true, message: '请输入密码',
}],
}) }
/>
<span className='error'>
{getFieldError('password')}
</span>
</FormItem>
<div className='submit'>
<Button colors="primary" className="login" onClick={this.submit}>登陆</Button>
<Button shape="border" className="reset">取消</Button>
</div>
</Form>
</div>
)
}
}
export default Form.createForm()(Demo2);
API
Form
代码演示
API
基于 rc-form。
使用注意，写在最前面
- 同一个表单中，表单元素不能设置相同的name
- 使用
getFieldProps 后，不能使用 ref 。 可以使用 this.props.form.getFieldInstance('ref')
Form
| 参数 |
说明 |
类型 |
默认值 |
| form |
经过Form.createForm包装后的组件，都带有this.props.form属性 |
Object |
- |
| prefixCls |
类名前缀 |
String |
u-form |
| className |
类名 |
String |
- |
| onSubmit |
提交事件 |
Function |
- |
| style |
样式 |
Object |
- |
FormItem
| 参数 |
说明 |
类型 |
默认值 |
| prefixCls |
类名前缀 |
String |
u-form |
| className |
类名 |
String |
- |
| style |
样式 |
Object |
- |
this.props.form
| 参数 |
说明 |
类型 |
默认值 |
| getFieldProps |
配置受控表单元素，经过此方法包装的表单元素才可以使用this.props.form中的其它方法，此表单元素需要有onChange方法，并且onChange回调的第一个值为此表单元素当前值 |
- |
- |
| getFieldDecorator |
类似getFieldProps |
- |
- |
| getFieldsValue([fieldNames: String[]]) |
根据name获取多个表单元素的值 |
- |
- |
| getFieldValue(fieldName: String) |
根据name获取单个表单元素的值 |
- |
- |
| getFieldInstance(fieldName: String) |
根据name获取表单元素 |
- |
- |
| setFieldsValue(obj: Object) |
根据name设置多个表单元素的值 |
- |
- |
| setFieldsInitialValue(obj: Object) |
根据name设置多个表单元素的默认值 |
- |
- |
| setFields(obj: Object) |
根据name设置多个表单元素的属性 |
- |
- |
| validateFields([fieldNames: String[]], [options: Object], callback: (errors, values) => void) |
校验表单。options.force(bool):是否校验已经校验过的字段; |
- |
- |
| getFieldsError(names) |
获取多个表单元素的错误信息 |
- |
- |
| getFieldError(name) |
获取单个表单元素的错误信息 |
- |
- |
| isFieldValidating(name: String) |
单个表单元素是否正在校验 |
- |
- |
| isFieldsValidating(names: String[]) |
多个表单元素是否正在校验 |
- |
- |
| isFieldTouched(names: String[]) |
单个表单元素的值是否已经被用户更改 |
- |
- |
| isFieldsValidating(names: String[]) |
多个表单元素的值是否已经被用户更改 |
- |
- |
| resetFields([names: String[]]) |
重置表单 |
- |
- |
| isSubmitting() |
表单是否正在提交 |
- |
- |
| submit(callback: Function) |
表单正在提交返回true，callback执行后返回false |
- |
- |
getFieldProps(name, option): Object { [valuePropName], [trigger], [validateTrigger] }
| 参数 |
说明 |
类型 |
默认值 |
| name |
设置表单元素name，不可以重复 |
String |
- |
| option.valuePropName |
设置表单元素取值的属性 |
String |
value |
| option.getValueProps |
根据表单元素属性获得值 |
function |
(value)=>({value}) |
| option.getValueFromEvent |
根据表单元素方法获得值 |
function |
(value)=>({value}) |
| option.normalize |
格式化值 |
function |
- |
| option.trigger |
侦听以收集表单数据的事件 |
String |
'onChange' |
| option.initialValue |
设置默认值 |
any |
- |
| option.validateTrigger |
设置校验时机 |
String |
onChange |
| option.rules |
设置校验规则 |
Object |
- |
| option.validateFirst |
当第一个校验失败时候是否阻止校验下一个校验规则 |
boolean |
false |
| option.hidden |
是否在验证时忽略当前字段 |
boolean |
false |
| option.onChange |
代替组件上的onChange方法 |
function |
- |
getFieldDecorator(name:String, option: Object) => (React.Node) => React.Node
与 getFieldProps 作用类似。 例如
<Form>
{getFieldDecorator('name', otherOptions)(<FormControl />)}
</Form>
rules 常用
参考 async-validator
| 参数 |
说明 |
类型 |
默认值 |
| required |
是否必选 |
boolean |
false |
| type |
内建校验类型(string字符串/number数字/boolean布尔/method函数/integer整数/float带小数点的数字/array数组[使用Array.isArray判断]/object对象且不是array/enum枚举/date日期/url链接/email邮箱)， |
string |
'string' |
| pattern |
正则表达式校验 |
RegExp |
- |
| min/max |
使用min和max属性定义范围。对于字符串和数组类型与长度进行比较，对于数字类型，数字不能小于min也不能大于max |
- |
- |
| len |
若要验证字段的确切长度，请指定len属性。对于长度属性执行字符串和数组类型比较，对于数字类型，此属性指示数字的精确匹配，即，它只能严格等于len。如果len属性与min和max范围属性组合，len优先。 |
- |
- |
| enum |
值为枚举类型中的一个。 例如：rules:[{type: "enum", enum: ['admin', 'user', 'guest']}] |
- |
- |
| transform |
校验前转换字段值 |
function(value) => transformedValue:any |
- |
| validator |
自定义校验（注意，callback 必须被调用） |
function(rule, value, callback) |
- |
| whitespace |
通常将仅包含空格的所需字段视为错误。若要为仅由空格组成的字符串添加额外的测试，值设置为true的规则添加空格属性。规则必须是字符串类型。 |
boolean |
false |
| fields |
如果需要验证深对象属性，可以通过向规则的字段属性分配嵌套规则来验证对象或数组类型的验证规则。 |
Object |
- |
createForm(option: Object) => (WrappedComponent: React.Component) => React.Component
| 参数 |
说明 |
类型 |
默认值 |
| option.validateMessages |
async-validator的预制消息 |
- |
- |
| option.onFieldsChange |
表单元素更改的回调，参数:(props, changed, all) |
function |
- |
| option.onValuesChange |
表单元素值更改的回调，参数:(props, changed, all) |
function |
- |
| option.mapProps |
将新的属性转义到WrappedComponent上 |
function |
props => props |
| option.mapPropsToFields |
将新的值从属性转义到表单元素上 |
function |
- |
| option.fieldNameProp |
设置存取 getFieldProps 名称的store |
string |
- |
| option.fieldMetaProp |
设置存取 getFieldProps 原数据的store |
string |
- |
| option.fieldDataProp |
设置存取 getFieldProps 数据的store |
string |
- |
| option.withRef(deprecated) |
是否为包装组件实例维护ref，使用refs.wrappedComponent进行访问 |
boolean |
false |
开发调试
$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-form
$ cd bee-form
$ npm install
$ npm run dev
tinper-bee