zent-form v2.1.0

zent-form

表单组件

API

ZentForm.Form

对于html中form元素的一个简单封装，提供默认的className

ZentForm.createForm(options)(FormComponent)

使用方式如下：

class FormComponent extends React.Component {
  render() {
    return (
      <Form>
        // 各种表单元素
        <Field
          name="interest"
          value={['eat', 'sleep']}
          component={(props) => (
            <CheckboxGroup {...props}>
              <Checkbox value="eat">吃饭</Checkbox>
              <Checkbox value="sleep">睡觉</Checkbox>
              <Checkbox value="wash">洗澡</Checkbox>
            </CheckboxGroup>
          )}
          validations={{
            // 直接在validations中定义校验方法就只能接收到所有表单元素值values和当前元素值value两个参数
            validInterest(values, value) {
              if (value.length > 0) return true
            }
          }}
          validationErrors={{
            validInterest: '至少选择一项'
          }}
        />
        <Field
          name="a"
          type="number"
          component={InputField}
          label="a"
          value="2"
          validations={{ 
            required: true, 
            // 使用自定义校验方法时可以额外传入参数
            isMoreThan: 'b'
          }}
          validationErrors={{ 
            required: '不能为空', 
            isMoreThan: 'a必须大于b' 
          }}
        />
        <Field
          name="b"
          type="number"
          component={InputField}
          label="b"
          value="3"
        />
      </Form>
    )
  }
}

FormComponent = Form.createForm({
  // 在这里定义的校验方法可以在定义validations时额外接收一个参数
  formValidations: {
    isMoreThan(values, value, otherField) {
      return Number(value) > Number(values[otherField])
    },
    ...
  }
})(FormComponent);

options 的配置项如下:

经过 ZentForm.createForm 包装的组件通过props添加了zenForm属性，所以原组件可以访问到 this.props.zentForm 属性，this.props.zentForm 提供的 API 如下：

ZentForm.Field

表单提交

form组件内部对表单提交的过程进行了一些封装，可以把异步提交的过程封装在一个function里并返回一个promise对象，组件内部会根据promise对象的执行结果分别调用onSubmitSuccess和onSubmitFail方法，同时更新isSubmitting属性。

  const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
  const submit = (values) => {
    return sleep(1000)
      .then(() => {
        console.log(values)
      })
  }

  class SubmitForm extends React.Component {
    render() {
      const { zentForm, handleSubmit } = this.props
      const isSubmitting = zentForm.isSubmitting()

      return (
        <Form onSubmit={handleSubmit(submit)}>
          ...
          <button type="submit">{isSubmitting ? '提交中' : '提交'}</button>
        </Form>
      )
    }
  }

  class FormContainer extends React.Component {
    onSubmitSuccess(result) {
      ...
    }

    onSubmitFail(error) {
      ...
    }

    render() {
      return (
        <SubmitForm
          onSubmitSuccess={this.onSubmitSuccess}
          onSubmitFail={this.onSubmitFail}
        />
      )
    }
  }