UNPKG

zent

Version:

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

173 lines (153 loc) 4.72 kB
/* eslint-disable no-console */ /* value的生命周期: ```text Field 中传入 value -> 使用 format() 格式化 value -> format 过的 value 传入 component 中渲染组件 ↑ | | ↓ | 用户操作改变 value | | | ↓ normalize 过的 value 写入 form 中维护, 用于数据提交 <- 使用 normalize() 格式化 value ``` */ import React, { Component } from 'react'; import _ from 'lodash'; // eslint-disable-line import Form from '../src'; import '../assets/index.scss'; import 'zent-input/assets/index.scss'; import 'zent-checkbox/assets/index.scss'; const { Field, InputField, CheckboxField, createForm } = Form; const renderTimeRange = props => ( <select name={props.name} value={props.value} onChange={props.onChange}> {_.map(_.range(props.from, props.to), (value) => { return <option value={value} key={value}>{value < 10 ? `0${value}:00` : `${value}:00`}</option>; })} </select> ); class NormalizeForm extends Component { static defaultProps = { bg_t: 1 } lower(value) { return value && value.toLowerCase(); } upper(value) { return value && value.toUpperCase(); } toInt(value) { return parseInt(value, 10); } formatCheckboxValue(value) { return value === '1'; } normalizeCheckboxValue(value) { return value ? '1' : '0'; } // 完全自主控制submit流程的例子 submit = () => { const zentForm = this.props.zentForm; const values = zentForm.getFormValues(); const field1 = this.field1; console.log(values); console.log(zentForm.isValid()); console.log(field1); } render() { const { zentForm } = this.props; const { getFieldError } = zentForm; const rangeError = getFieldError('bg_t'); return ( <Form horizontal> <Field name="field1" type="text" component={InputField} label="转化为小写:" value="AAA" validations={{ required: true }} validationErrors={{ required: '不能为空' }} normalize={this.lower} format={this.lower} ref={(ref) => this.field1 = ref} /> <Field name="field2" type="text" component={InputField} label="转为大写:" value="bbb" normalize={this.upper} format={this.upper} /> <div className={rangeError ? 'zent-form__control-group has-error' : 'zent-form__control-group'}> <label className="zent-form__control-label">发送时间段:</label> <div className="zent-form__controls"> 每日 <Field name="bg_t" component={renderTimeRange} from={0} to={24} value={this.props.bg_t} normalize={this.toInt} validations={{ checkTime: true }} validationErrors={{ checkTime: '结束时间必须大于开始时间' }} /><Field name="eg_t" component={renderTimeRange} from={1} to={25} value={1} normalize={this.toInt} /> {rangeError ? <p className="zent-form__help-block">{rangeError}</p> : null} </div> </div> <Field name="is_agree" label="是否同意本协议:" value={'1'} format={this.formatCheckboxValue} normalize={this.normalizeCheckboxValue} component={CheckboxField} > 同意 </Field> <div className="zent-form__form-actions"> <button type="button" onClick={this.submit}>提交</button> </div> </Form> ); } } const NormalizeFormContainer = createForm({ formValidations: { checkTime(values, value) { return +value < +values.eg_t; } } })(NormalizeForm); export default class Simple extends Component { constructor(props) { super(props); this.state = { bg_t: 2 }; } onChange = () => { this.setState({ bg_t: 20 }); } render() { return ( <div> <h2>format & normalize</h2> <hr /> <NormalizeFormContainer onChange={this.onChange} bg_t={this.state.bg_t} /> </div> ); } }