uxcore-form v6.3.6

React Form

setup develop environment

$ git clone https://github.com/uxcore/uxcore-form
$ cd uxcore-form
$ npm install
$ npm start

Usage

see demo/FormDemo.js for details 每一个 field 需要按照 Form -> FormRow -> FormField 的方式进行嵌套，允许 Form -> FormField 的嵌套，会自动增加 FormRow 这一层，并默认占一整行。

API

Form

• getValues(force) 获取目前的 values 和 pass（是否通过检测）。 参数： * force Boolean: 强制校验或不校验，undefined 时则忽略此配置。

• resetValues() 重置所有的 FormField，如果有默认值则重置为默认值。

• setValues(data) 手动设置各个 FormField 的值，在表单联动时可能会用得到。 参数： * data Object: 和 jsxvalues 的格式相同。

• isDirty() 获取目前的表单是否没有通过检测，返回 true 或 false。

• doValidate(force, always) 获取目前的表单是否通过检测，返回 true 或者 false。

  • force：是否强制校验，无视不校验的规则。
  • always：强制校验通过或者失败，通常可以用于清空出错状态。

• doValidateAndScroll(force, always) 获取目前的表单是否通过检测并滚动至第一个出错的 field，参数同上。

Form.createFormField(options)

props

Form

jsxvalues 的格式

{
    jsxname1: value1,
    jsxname2: value2
}

FormRow

FormField 通用配置

Validators

Form 提供了一些通用的 validator，通过 Form.Validators 来引入。用法还是见 Usage 和 demo/formDemo.js 包括： 所有的 validator 返回 true，表示通过。 validator 也可以自己定义，会传入相应的表单值，根据判断，返回 true，表示通过。

• isNotEmpty
• isNum
• isInt: 是否是整数
• isDecimal: 是否是小数
• isArray
• isRegExp
• isObject
• isFunc
• isEmail
• isUrl
• isHex
• isIdCard: 是否是中国身份证。
• isCNMobile: 是否是中国手机号。

FormField 专属配置

所有的 FormField 都共享通用配置，所有的专属配置在 demo/formDemo.js，均有体现。

InputFormField

• 插件：

  • Count，通过 InputFormField.Count 取得，一个内置的计数器，用法如下：

    <InputFormField>
        <Count total="20">
    </InputFormField>

  • LeftAddon/RightAddon，通过 InputFormField.LeftAddon/InputFormField.RightAddon 取得，给 input 左侧加入自定义的图标或文字，用法如下：

    <InputFormField>
        <LeftAddon>
            <i className="kuma-icon kuma-icon-phone"></i>
        </LeftAddon>
        <RightAddon>
            <span>元</span>
        </RightAddon>
    </InputFormField>

TextAreaFormField

配置 autosize 的同时，还可以通过样式指定 min-height 和 max-height

• 插件：

  • Count，通过 TextAreaFormField.TextAreaCount 取得，一个内置的计数器，用法如下：

    <TextAreaFormField>
        <TextAreaCount total={100}>
    </TextAreaFormField>

RadioGroupFormField

• Item：通过 RadioGroupFormField.Item 取得，有两个 props
  • value
  • text：显示的值
• 使用方式：

<RadioGroupFormField>
    <Item value="1" text="a">
    <Item value="2" text="b">
    <Item value="3" text="c">
</RadioGroupFormField>

SelectFormField

jsxdata 的格式

jsxdata 目前支持两种格式

// Object
{
    a: "A",
    b: "B"
}
// Array
[
    {
        value: 'a',
        text: 'A'
    }
]

配置 jsxfetchUrl 后，会在组件渲染后立刻以空搜索值发起一次请求，我们强烈建议服务端完善空值搜索的请求处理逻辑，返回热点数据和用户关联数据，以提供更好的选择体验。

此外，SelectFormField 还支持 uxcore-select2 除 onSelect/onDeselect 外的全部属性。

SearchFormField

该组件继承自 SelectFormField，支持 SelectFormField 的全部 props。

CheckboxGroupFormField

• Item：通过 CheckboxGroupFormField.Item 取的，有两个 props
  • value
  • text：显示的值
  • disabled：该 Item 的 disable 状态。
  • addon: 额外指定的信息，例如tips
• 使用方式：

<CheckboxGroupFormField>
    <Item value="1" text="a" disabled={true} />
    <Item value="2" text="b" />
    <Item value="3" text="c"
        addon={
            <Tooltip overlay={<div>提示</div>}>
                <i className='kuma-icon kuma-icon-caution' style={{color: 'blue', fontSize: '12px', 'marginLeft': '3px'}} />
            </Tooltip>
        }
    />
</CheckboxGroupFormField>

DateFormField

除此之外，支持除 onSelect，uxcore-calendar 的所有 props。

NumberInputFormField

CascadeSelectFormField

PickableFormField

EditorFormField

API

setContent(content)：设置 EditorFormField 的值，很不幸，EditorFormField 无法做成完全受控的组件，因为 setContent 操作会导致搜狗等中文输入法使用障碍，因此 EditorFormField 的值重置通过这个 API 来完成，或者也可以使用 Form 的 setValues 方法。

OtherFormField

OtherFormField 是一个特殊的 FormField，它用来和其他 FormField 一起完成布局（比如在一行排列等），如果需要一些装饰类的东西，可以以子元素的形式传入到这个 Field 里。 他也可以用于布局中的占位。

ButtonGroupFormField

ButtonGroupFormField 是一个特殊的 FormField，它用来生成一些特定的表单按钮，这是为了与 Grid 相结合而准备的。如果需要自定义一些按钮，请使用 OtherFormField 和 uxcore-button 相结合来使用。 你可以像这样使用它：

var Button = require('uxcore-button');
<ButtonGroupFormField>
    {// handleClick 会被传入一个参数 data，取得的值和 API getValues() 相同}
    <Button action="submit" onClick={this.handleClick.bind(this)}/>
    {// 目前只支持 submit 和 reset 两种 action}
    <Button action="reset"/>
</ButtonGroupFormField>