东方网升 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
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