东方网升 react 表单组件

发布

1. 更改package.json版本
2. yarn run build
3. npm publish 注：镜像源需切换回NPM官方源

链接

• 更新日志

示例

• cd example
• yarn
• yarn start

使用之前

该组件依赖于react,rc-form,dfws-react-upload 使用前自行配置react 需要上传时自行配置ve-form-upload

何时使用

• 项目需要构建react表单时

API

<div className="masker">
  <div className='form-box'>
    <FormList formList={this.state.formData} handleInit={this.handleInit} />
    <div>{this.state.value}</div>
    <div className='submit-btn'><button onClick={this.handleSubmit}>提交</button></div>
  </div>
</div>

form props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | formList | 表单数据 | Array | - | | type | 表单类型 input:默认输入框;select:默认下拉选择,配合data使用;checkbox:默认点击选择 配合data使用;radio默认单项框;upload默认文件上传组件 配合component与uploadType参数使用;hidden默认隐藏内部表单;需配合formList,component使用;custom自定义组件,配合component参数使用| string | --- | | component | 需传入ReactNode 若type为custom，hidden，upload时生效 接收initialValue,name,rules,data,label 等参数 若type为upload时component用于自定义样式，需设置id用以上传；若type为custom额外接收handleChange 当变更数据时调用该方法传入变更后的数据 | reactNode | null | | initialValue | 表单默认数据 | string|number | null | | name | 设置表单域内字段 id | string | null | | label | 表单前缀名 | string | null | | isError | 是否需要直接在页面上展示输入错误提示 | boolean | false | | rules | 校验数据规则 参考https://ant.design/components/form-cn/#%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99 https://github.com/yiminghe/async-validator | Array | null | | data | 若type为select，checkbox，custom 时生效， custom需自己接收 参数名为data | Array | [] | | formList | 参数同表单数据,不允许继续套用hidden 只有type为hidden时起效 | Array | --- | | placeholder | 展示placeholder,默认组件使用 | string | null | | inline | 是否需要设置为inline-block | boolean | false | | show | 只有type为hidden时起效,hidden中的组件是否显示,可通过操作show变更是否展示隐藏项 | boolean | false | | uploadType | 参数同oss-upload组件,只有type为custom与upload时接收使用,若upload使用不需要success参数 | json| null | | isForm | 只有type为custom时起效 是否要将当前组件作为可提交的表单组件 | boolean | true | | UIComponent | 当需要有额外样式使用,若type为upload，额外接收value参数，用以展示上传文件 | reactNode | null | | className | 当前表单模块className | string | --- | | readOnly | 是否只读,默认组件使用 | boolean | null | | disabled | 是否禁用,默认组件使用 | boolean | null | | height | 组件高度,默认组件使用 | number | null | | width | 组件宽度,默认组件使用 | number | null | | handleInit | 表单加载完成时的调用方法，返回form方法 | function | - |

参考文档

form