bee-form v2.0.14

bee-form

react bee-form component for tinper-bee

依赖

• react >= 15.3.0
• react-dom >= 15.3.0
• prop-types >= 15.6.0

使用方法

/**
 *
 * @title 基本form校验
 * @description 登录示例
 */
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

FormItem

this.props.form

getFieldProps(name, option): Object { valuePropName, trigger, validateTrigger }

getFieldDecorator(name:String, option: Object) => (React.Node) => React.Node

与 getFieldProps 作用类似。 例如

<Form>

  {getFieldDecorator('name', otherOptions)(<FormControl />)}

</Form>

rules 常用

参考 async-validator

createForm(option: Object) => (WrappedComponent: React.Component) => React.Component

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-form
$ cd bee-form
$ npm install
$ npm run dev