# 快速入门

## 安装

```bash
nenpm install @wowpic/xform-react
```

## 使用

`XForm`通过配置`Schema`的形式来初始化表单，其中`Schema`是一份由JS对象组成的数组，数组中的每个成员都代表一个表单项的配置。Schema的结构设计和案例可以参考[Schema设计](zh-cn/schema)

```javascript
import { XForm } from '@wowpic/xform-react';
import schema from './schema.js';
import 'antd/dist/antd.css';
import '@wowpic/xform-react/lib/xform.css';

export default function () {
    const formRef = useRef(null);

    const onSubmit = () => {
        formRef.current.submit().then(data => {
            const { valid, value } = data;
            console.log(valid, value);
        });
    };

    const onReset = () => {
        formRef.current.reset();
    };

    return (
        <>
            <XForm
                ref={formRef}
                schema={schema}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 12 }}
            />
            <div>
                <Button type="primary" onClick={onSubmit}>提交</Button>
                <Button onClick={onReset}>重置</Button>
            </div>
        </>
    );
};
```

`Schema`例子如下：

```javascript
export default [
    {
        key: 'input',
        type: 'Input',
        ui: {
            label: '输入框',
            required: true
        },
        props: {
            placeholder: '请输入'
        },
        rules: [
            {
                required: true,
                message: '输入内容不能为空'
            }
        ]
    }
];
```