UNPKG

zent

Version:

一套前端设计语言和基于React的实现

101 lines (93 loc) 2.72 kB
/* eslint-disable no-console */ import React, { Component } from 'react'; import Form from '../src'; import cx from 'zent-utils/classnames'; import '../assets/index.scss'; const { Field, createForm } = Form; const renderField = props => { const showError = props.isTouched && props.error; const controlGroupClass = cx({ 'zent-form__control-group': true, 'has-error': showError }); return ( <div className={controlGroupClass}> <label className="zent-form__control-label">{props.label}</label> <div className="zent-form__controls"> <input {...props} /> {showError && <span className="zent-form__help-block">{props.error}</span>} </div> </div> ); }; class RegisterForm extends Component { submit = (values, zentForm) => { let promise = new Promise((resolve) => setTimeout(resolve, 1000)); return promise.then(() => { zentForm.setFieldExternalErrors({ user: '用户名已被占用' }); }); } render() { const { handleSubmit, zentForm } = this.props; const isSubmitting = zentForm.isSubmitting(); return ( <Form onSubmit={handleSubmit(this.submit)} horizontal> <Field name="user" type="text" component={renderField} label="用户名:" value="111" validations={{ required: true }} validationErrors={{ required: '用户名不能为空' }} /> <Field name="password" type="password" component={renderField} label="密码:" value="222" validations={{ required: true }} validationErrors={{ required: '密码不能为空' }} /> <Field name="confirmPassword" type="password" component={renderField} label="确认密码:" value="222" validations={{ required: true, isPasswordEqual(values, value) { if (values.password !== value) { return '两次密码输入不一致'; } return true; } }} validationErrors={{ required: '确认密码不能为空' }} /> <div className="zent-form__form-actions"> <button type="submit">{isSubmitting ? '登录中...' : '登录'}</button> </div> </Form> ); } } const RegisterFormContainer = createForm()(RegisterForm); export default class Simple extends Component { render() { return ( <div> <h2>服务端校验 & 展示服务端错误信息</h2> <hr /> <RegisterFormContainer /> </div> ); } }