zent
Version:
一套前端设计语言和基于React的实现
120 lines (115 loc) • 3.46 kB
JavaScript
import React, { Component } from 'react';
import Form from '../src';
import Checkbox from 'zent-checkbox';
import Radio from 'zent-radio';
import Option from 'zent-select';
import '../assets/index.scss';
import 'zent-checkbox/assets/index.scss';
import 'zent-select/assets/index.scss';
import 'zent-radio/assets/index.scss';
import 'zent-input/assets/index.scss';
const { Field, createForm, InputField, CheckboxField, CheckboxGroupField, RadioGroupField, SelectField } = Form;
const isAgree = true;
class FieldsForm extends Component {
render() {
return (
<Form horizontal>
<Field
name="name"
type="text"
label="用户名:"
value="123"
validations={{ required: true }}
validationErrors={{ required: '不能为空' }}
component={InputField}
helpDesc={<span>我是说明<a href="https://youzan.com">我是链接</a></span>}
required
/>
<Field
name="number"
type="number"
label="购买数量:"
addonBefore="买了"
value="123"
addonAfter="个苹果"
validations={{
required: true,
validNumber(values, value) {
return /^\d*$/.test(value);
}
}}
validationErrors={{
required: '不能为空',
validNumber: '必须是整数'
}}
component={InputField}
/>
<Field
name="sex"
label="性别:"
value="female"
component={RadioGroupField}
>
<Radio value="male">男</Radio>
<Radio value="female">女</Radio>
</Field>
<Field
name="interest"
label="兴趣爱好:"
value={['eat', 'sleep']}
component={CheckboxGroupField}
validations={{
validInterest(values, value) {
const len = value.length;
if (len === 3) {
return true;
} else if (len === 2) {
return '你才选了两项';
} else if (len === 1) {
return '你才选了一项';
}
}
}}
validationErrors={{
validInterest: '至少选择一项兴趣爱好'
}}
>
<Checkbox value="eat">吃饭</Checkbox>
<Checkbox value="sleep">睡觉</Checkbox>
<Checkbox value="wash">洗澡</Checkbox>
</Field>
<Field
name="custom-select"
label="请选择:"
className="custom-select"
placeholder="请选择"
component={SelectField}
>
<Option className="zent-select-option" value="1">选项一</Option>
<Option className="zent-select-option" value="2">选项二</Option>
<Option className="zent-select-option" value="3">选项三</Option>
</Field>
<Field
name="is_agree"
label="是否同意本协议:"
value={isAgree}
component={CheckboxField}
>
同意
</Field>
</Form>
);
}
}
const FieldsFormContainer = createForm()(FieldsForm);
export default class Simple extends Component {
render() {
return (
<div>
<h2>内置表单组件(对其他zent组件的封装)</h2>
<hr />
<FieldsFormContainer />
</div>
);
}
}