README
Mota Form
简述
为什么需要 Mota From?
Mota 让数据和状态更易于管理、更易于复用。Mota Validation 为 Mota 提供了灵活方便的数据验证能力, Mota Validation 也几乎能满足所有的验证需求。但 Mota Validation 以「数据验证」为重, 让我们在做一些「比较典型规整表单需求」时,常常还需要自行编写表单布局相关的样式。
为此,开发了 Mota Form,在 Mota 和 Mota Validation 的基础上,为开发人员提供大数情况下「可开箱即用」的表单组件。 提供相对规整、通用的布局能力,同时,简化 Mota Validation 的使用。
安装
通过如下命令安装 Mota Form
npm install mota-form --save
需要注意,Mota Form 不能单独使用,它依赖 Mota 和 Mota Validation,如果未安装它们,也需要一并安装, 参考如下命令一键安装所有依赖。
npm install mota mota-validation mota-form --save
使用
在 class 组件中使用
import * as React from "react";
import { model } from "mota";
import { validation, Validation } from "mota-validation";
import { Field, Form } from "mota-form";
const data={
name: "",
email: "",
title: "",
comment: ""
};
@model(data)
@validation
class Demo extends React.Component {
model: any;
validation: Validation;
render() {
const { state, states } = this.validation;
return (
<Form context={this}>
<Field
label="Name"
tip="Please enter your name."
bind="name"
rules={[{ test: "required", message: "You must enter a name." }]}
percent={50}
>
<input type="text" />
</Field>
<Field
label="Email"
tip="Please enter your email."
bind="email"
rules={[{ test: "required" }, { test: "email" }]}
percent={50}
>
<input type="email" />
</Field>
<Field
label="Title"
tip="Please enter comment title."
bind="title"
rules={[{ test: "required" }]}
percent={100}
>
<input type="text" />
</Field>
<Field
label="Comment"
tip="Please enter comment content."
bind="comment"
rules={[{ test: "required" }]}
percent={100}
>
<textarea />
</Field>
<Field tip={false}>
<button disabled={state() !== states.success}>
Submit ({state()})
</button>
</Field>
</Form>
);
}
}
在 function 组件中使用
import * as React from "react";
import { useModel } from "mota";
import { useValidation } from "mota-validation";
import { Field, Form } from "mota-form";
const data = {
name: "",
email: "",
title: "",
comment: ""
});
function Demo() {
const model = useModel(data);
const validation = useValidation(model);
const { state, states } = validation;
return (
<Form context={{ model, validation }}>
<Field
label="Name"
tip="Please enter your name."
bind="name"
rules={[{ test: "required", message: "You must enter a name." }]}
percent={50}
>
<input type="text" />
</Field>
<Field
label="Email"
tip="Please enter your email."
bind="email"
rules={[{ test: "required" }, { test: "email" }]}
percent={50}
>
<input type="email" />
</Field>
<Field
label="Title"
tip="Please enter comment title."
bind="title"
rules={[{ test: "required" }]}
percent={100}
>
<input type="text" />
</Field>
<Field
label="Comment"
tip="Please enter comment content."
bind="comment"
rules={[{ test: "required" }]}
percent={100}
>
<textarea />
</Field>
<Field tip={false}>
<button disabled={state() !== states.success}>
Submit ({state()})
</button>
</Field>
</Form>
);
}