zent/form/examples/format_and_normalize.js

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

/* 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>
    );
  }
}