{JSON.stringify(state, null, 2)}
{JSON.stringify(state, null, 2)}
{JSON.stringify(state, null, 2)}
{JSON.stringify(state, null, 2)}
{items.map((item, idx) => {
return (
删除}
>
(formRefList.current[idx] = e)}
// 表单类型
formType="pure"
form={form}
cardProps={{
noHover: true,
}}
// 更新表单的值
buttonsContainer={{ justifyContent: 'flex-start' }}
formDatas={item({
searchSelect:{
option:option,
onSearch: handleSearch.bind(this,'searchSelect'),
loading:loading
}
})}
/>
)
})}
);
}
export default Demo
```
### promise提交
```jsx mdx:preview
import ReactDOM from 'react-dom';
import React, { useState,useRef } from 'react';
import { ProForm,useForm } from '@uiw-admin/components'
import { Button,Card } from 'uiw'
const Demo = () => {
const form = useForm()
const formRefList = useRef([])
const [state,setState] = useState([])
const [items,setItems] = useState([])
const [option,setOption] = React.useState([])
const [loading, setLoading] = React.useState(false)
// 过滤删除为null的ref
const formList = formRefList?.current.filter(n => n) || []
const asyncAwaitFormList = (arr=[]) => {
return (
arr && arr.length>0 && Promise.all(arr).then((vals) =>{
return vals
})
)
};
const addItems = (attr)=>[
{
label: '司机手机号',
key: 'phone',
widget: 'input',
initialValue: '',
rules: [
{ required: true, message: '请输入' },
]
},
{
label: 'searchSelect',
key: 'searchSelect',
widget: 'searchSelect',
option: attr.searchSelect.option,
widgetProps: {
mode:"multiple",
onSearch: attr.searchSelect.onSearch,
loading: attr.searchSelect.loading,
allowClear: true,
showSearch: true,
style:{ width:"100%" }
},
},
]
const handleAddFormItems = (type,idx)=>{
if(type==='add'){
items.push(addItems)
}
if(type==='delete'){
items.splice(idx,1)
}
setItems([...items])
}
// 模拟搜索
const handleSearch = ( type = '' , name = '' ) => {
if (type === 'searchSelect') {
setLoading(true)
setOption([
{ value: 1, label: '苹果' },
{ value: 2, label: '西瓜' },
{ value: 3, label: '香蕉' },
{ value: 4, label: '东北大冻梨' },
])
setTimeout(() => {
setLoading(false)
}, 2000)
}
}
const handleSave = async ()=>{
const validateList = formList.map(itm=> itm.validateFieldsAndGetValue()) || []
const values = await asyncAwaitFormList(validateList)
setState(values)
// 调用接口
}
return (
{JSON.stringify(state, null, 2)}
{items.map((item, idx) => {
return (
删除}
>
(formRefList.current[idx] = e)}
// 表单类型
formType="pure"
form={form}
cardProps={{
noHover: true,
}}
// 更新表单的值
buttonsContainer={{ justifyContent: 'flex-start' }}
formDatas={item({
searchSelect:{
option:option,
onSearch: handleSearch.bind(this,'searchSelect'),
loading:loading
}
})}
/>
)
})}
);
}
export default Demo
```
## 只读模式
```jsx mdx:preview
import ReactDOM from 'react-dom';
import { ProForm,useForm } from '@uiw-admin/components'
import { formatter } from 'uiw'
import React, { useState } from 'react';
const Demo = () => {
const [ queryInfo ] = useState({
input:"Jason",
textarea:"Jason",
select:"Jason",
dateInputsecond: '2021-1-21 23:59:59',
dateInput: '2021-1-21',
monthPicker: '2021-1',
timePicker: '2021-1-21 22:59:59',
searchSelect:["Jason"],
rate:2
})
const form = useForm()
return (
{JSON.stringify(state, null, 2)}
## License
Licensed under the MIT License.