Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
9cce0944
N
nutui-react
项目概览
京东前端
/
nutui-react
通知
0
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui-react
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
9cce0944
编写于
2月 15, 2023
作者:
J
junjun666
提交者:
GitHub
2月 15, 2023
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: form表单组件新增initialValue初始值属性 (#671)
上级
f16c9adc
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
137 addition
and
19 deletion
+137
-19
src/packages/form/demo.tsx
src/packages/form/demo.tsx
+30
-2
src/packages/form/doc.en-US.md
src/packages/form/doc.en-US.md
+41
-4
src/packages/form/doc.md
src/packages/form/doc.md
+38
-0
src/packages/form/useForm.ts
src/packages/form/useForm.ts
+9
-9
src/packages/formitem/formitem.tsx
src/packages/formitem/formitem.tsx
+19
-4
未找到文件。
src/packages/form/demo.tsx
浏览文件 @
9cce0944
...
...
@@ -18,6 +18,7 @@ interface T {
title10
:
string
title2
:
string
title3
:
string
title4
:
string
name
:
string
nameTip
:
string
nameTip1
:
string
...
...
@@ -60,7 +61,8 @@ const FormDemo = () => {
title1
:
'
动态表单
'
,
title10
:
'
顶部对齐
'
,
title2
:
'
表单校验
'
,
title3
:
'
表单类型
'
,
title3
:
'
带有初始值表单校验
'
,
title4
:
'
表单类型
'
,
name
:
'
姓名
'
,
nameTip
:
'
请输入姓名
'
,
nameTip1
:
'
请输入姓名
'
,
...
...
@@ -100,7 +102,8 @@ const FormDemo = () => {
title1
:
'
Dynamic Form
'
,
title10
:
'
Top Align
'
,
title2
:
'
Validate Form
'
,
title3
:
'
Form Type
'
,
title3
:
'
InitialValue Validate Type
'
,
title4
:
'
Form Type
'
,
name
:
'
Name
'
,
nameTip
:
'
Please enter your name
'
,
nameTip1
:
'
Please enter name
'
,
...
...
@@ -250,7 +253,32 @@ const FormDemo = () => {
<
input
type
=
"submit"
value
=
{
translated
.
submit
}
/>
</
Cell
>
</
Form
>
<
h2
>
{
translated
.
title3
}
</
h2
>
<
Form
onFinish
=
{
(
obj
)
=>
submitSucceed
(
obj
)
}
onFinishFailed
=
{
(
error
)
=>
submitFailed
(
error
)
}
>
<
Form
.
Item
label
=
{
translated
.
name
}
name
=
"username"
rules
=
{
[{
required
:
true
,
message
:
translated
.
nameTip
}]
}
initialValue
=
"张三"
>
<
Input
placeholder
=
{
translated
.
nameTip1
}
type
=
"text"
/>
</
Form
.
Item
>
<
Form
.
Item
label
=
{
translated
.
age
}
name
=
"age"
>
<
Input
placeholder
=
{
translated
.
ageTip1
}
type
=
"number"
defaultValue
=
"18"
/>
</
Form
.
Item
>
<
Cell
>
<
input
type
=
"submit"
value
=
{
translated
.
submit
}
/>
</
Cell
>
</
Form
>
<
h2
>
{
translated
.
title4
}
</
h2
>
<
Form
onFinish
=
{
(
obj
)
=>
submitSucceed
(
obj
)
}
onFinishFailed
=
{
(
error
)
=>
submitFailed
(
error
)
}
...
...
src/packages/form/doc.en-US.md
浏览文件 @
9cce0944
...
...
@@ -12,7 +12,7 @@ import { Form } from '@nutui/nutui-react'
### Basic Usage
:::demo
```
```
tsx
import
React
from
"
react
"
;
import
{
Form
,
Input
,
TextArea
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
...
...
@@ -40,7 +40,7 @@ export default App;
### Top Align
:::demo
```
```
tsx
import
React
from
"
react
"
;
import
{
Form
,
Input
,
TextArea
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
(
...
...
@@ -64,7 +64,7 @@ export default App;
### Validate Form
:::demo
```
```
tsx
import
React
from
"
react
"
;
import
{
Form
,
Input
,
Cell
}
from
'
@nutui/nutui-react
'
;
...
...
@@ -103,10 +103,46 @@ export default App;
```
:::
### InitialValue Validate Type
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Form
,
Input
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Form
onFinish
=
{
(
obj
)
=>
submitSucceed
(
obj
)
}
onFinishFailed
=
{
(
error
)
=>
submitFailed
(
error
)
}
>
<
Form
.
Item
label
=
'Name'
name
=
"username"
initialValue
=
"zhangsan"
>
<
Input
className
=
"nut-input-text"
placeholder
=
'Please enter your name'
type
=
"text"
/>
</
Form
.
Item
>
<
Form
.
Item
label
=
'Age'
name
=
"age"
>
<
Input
placeholder
=
'Please enter age'
type
=
"number"
defaultValue
=
"18"
/>
</
Form
.
Item
>
<
Cell
>
<
input
type
=
"submit"
value
=
'Submit'
/>
</
Cell
>
</
Form
>
</>
)
}
export
default
App
;
```
:::
### Form Type
:::demo
```
```
tsx
import
React
from
"
react
"
;
import
{
Form
,
Input
,
Cell
,
Switch
,
Checkbox
,
Radio
,
Rate
,
Range
}
from
'
@nutui/nutui-react
'
;
...
...
@@ -176,6 +212,7 @@ export default App;
| name | the field of the form field is required when the form verification function is used | string | - |
| labelWidth | The width of the form item label. The default unit is
`px`
| number
\|
string |
`90px`
|
| errorMessageAlign | Error prompt text alignment. The optional values are
`center`
and
`right`
| string |
`left`
|
| initialValue
`v1.4.7`
| Set child element default value | string | - |
### Form.Item Rule Data Structure
...
...
src/packages/form/doc.md
浏览文件 @
9cce0944
...
...
@@ -113,6 +113,43 @@ export default App;
```
:::
### 带有初始值表单校验
:::demo
```
tsx
import
React
from
"
react
"
;
import
{
Form
,
Input
,
Cell
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Form
onFinish
=
{
(
obj
)
=>
submitSucceed
(
obj
)
}
onFinishFailed
=
{
(
error
)
=>
submitFailed
(
error
)
}
>
<
Form
.
Item
label
=
'姓名'
name
=
"username"
initialValue
=
"张三"
>
<
Input
className
=
"nut-input-text"
placeholder
=
'请输入姓名'
type
=
"text"
/>
</
Form
.
Item
>
<
Form
.
Item
label
=
'年龄'
name
=
"age"
>
<
Input
placeholder
=
'请填写年龄'
type
=
"number"
defaultValue
=
"18"
/>
</
Form
.
Item
>
<
Cell
>
<
input
type
=
"submit"
value
=
'提交'
/>
</
Cell
>
</
Form
>
</>
)
}
export
default
App
;
```
:::
### 表单类型
:::demo
...
...
@@ -186,6 +223,7 @@ export default App;
| name | 在使用表单校验功能的情况下,该属性是必填的 | string | - |
| labelWidth | 表单项 label 宽度,默认单位为
`px`
| number
\|
string |
`90px`
|
| errorMessageAlign | 错误提示文案对齐方式,可选值为
`center`
`right`
| string |
`left`
|
| initialValue
`v1.4.7`
| 设置子元素默认值 | string | - |
### Form.Item Rule 数据结构
...
...
src/packages/form/useForm.ts
浏览文件 @
9cce0944
...
...
@@ -46,14 +46,14 @@ class FormStore {
...
this
.
store
,
...
newStore
,
}
this
.
fieldEntities
.
forEach
((
enetity
:
FieldEntity
)
=>
{
const
{
name
}
=
enetity
.
props
Object
.
keys
(
newStore
).
forEach
((
key
)
=>
{
if
(
key
===
name
)
{
enetity
.
onStoreChange
()
}
})
})
//
this.fieldEntities.forEach((enetity: FieldEntity) => {
//
const { name } = enetity.props
//
Object.keys(newStore).forEach((key) => {
//
if (key === name) {
//
enetity.onStoreChange()
//
}
//
})
//
})
}
/**
...
...
@@ -93,7 +93,7 @@ class FormStore {
this
.
errList
.
push
(...
errors
)
// 表单项更新
}
entity
.
onStoreChange
()
//
entity.onStoreChange()
})
})
return
err
...
...
src/packages/formitem/formitem.tsx
浏览文件 @
9cce0944
...
...
@@ -17,6 +17,7 @@ export interface FormItemProps extends BasicComponent, BaseFormField {
errorMessageAlign
:
TextAlign
showErrorLine
:
boolean
showErrorMessage
:
boolean
initialValue
:
string
}
const
defaultProps
=
{
...
...
@@ -30,6 +31,7 @@ const defaultProps = {
errorMessageAlign
:
'
left
'
,
showErrorLine
:
true
,
showErrorMessage
:
true
,
initialValue
:
''
,
}
as
FormItemProps
export
type
FieldProps
=
typeof
defaultProps
&
Partial
<
BaseFormField
>
...
...
@@ -60,13 +62,19 @@ export class FormItem extends React.Component<FieldProps> {
const
{
name
}
=
this
.
props
const
type
=
(
children
as
any
).
type
.
NAME
const
defaultvalue
=
this
.
props
.
initialValue
||
(
children
as
any
).
props
?.
defaultValue
if
(
defaultvalue
)
{
setFieldsValue
({
[
name
]:
defaultvalue
})
}
return
{
value
:
getFieldValue
(
name
),
onChange
:
(
event
:
React
.
ChangeEvent
<
HTMLInputElement
>
|
number
|
string
|
string
[]
)
=>
{
const
originOnChange
=
(
children
as
any
).
props
.
onChange
if
(
originOnChange
)
{
if
(
originOnChange
)
{
originOnChange
(
event
)
}
let
newValue
=
event
...
...
@@ -83,7 +91,7 @@ export class FormItem extends React.Component<FieldProps> {
}
onStoreChange
=
()
=>
{
this
.
forceUpdate
()
//
this.forceUpdate()
}
renderLayout
=
(
childNode
:
React
.
ReactNode
)
=>
{
...
...
@@ -156,10 +164,17 @@ export class FormItem extends React.Component<FieldProps> {
}
render
()
{
const
{
children
}
=
this
.
props
const
{
children
,
initialValue
}
=
this
.
props
const
c
=
Array
.
isArray
(
children
)
?
children
[
0
]
:
children
let
restCNode
=
c
as
React
.
ReactElement
if
(
initialValue
)
{
restCNode
=
React
.
cloneElement
(
c
as
React
.
ReactElement
,
{
defaultValue
:
initialValue
,
})
}
const
returnChildNode
=
React
.
cloneElement
(
c
as
React
.
ReactElement
,
restCNode
,
this
.
getControlled
(
c
as
React
.
ReactElement
)
)
return
this
.
renderLayout
(
returnChildNode
)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录