咱們但願快速構建form表單,可是還得寫檢驗,綁定數據等等,每每比較麻煩。html
咱們但願代碼這樣就能夠實現一個表單的基本需求react
👇ios
[
{type: 'input', title: '您的姓名', width: '331px' },
{type: 'input', title: '您的手機號碼', width: '331px', pattern: /^1{1}\d{10}$/, message: '請輸入正確的手機號'},
{type: 'radios', title: '教育背景', data: ['專科如下', '專科'], },
...
{type: 'input', textArea: true, title: '但願老師協助解答的問題', rows: 4, required: false},
]
複製代碼
根據數據結構生成簡單的表單,再寫一個回調函數,請求後臺便可。web
我基於antd寫了一個簡單的代碼封裝,使用的例子以下json
const [formloading, setformloading] = useState(false)
const [formJSON] = useState<typeFormJSON>([
{type: 'input', title: '您的姓名', width: '331px' },
{type: 'input', title: '您的手機號碼', width: '331px', pattern: /^1{1}\d{10}$/, message: '請輸入正確的手機號'},
{type: 'radios', title: '教育背景', data: ['專科如下', '專科'], },
...
{type: 'input', textArea: true, title: '但願老師協助解答的問題', rows: 4, required: false},
])
const onFinish = async (value: any) => {
setformloading(true)
console.log(value)
// await Axios.post('[web]/xx', value)
setformloading(false)
// TODO 成功處理
}
return <div>
<div>
<Form onFinish={onFinish}>
<JSONToForm json={formJSON} />
<Form.Item>
<Button type="primary" htmlType="submit" loading={formloading} className={styles.button}>提交信息</Button>
</Form.Item>
</Form>
</div>
</div>
複製代碼
能夠看到,這裏有一個JSONToForm
組件,這個組件咱們實現下,就能夠了。個人實現組件代碼數組
import React from 'react'
import {Form, Radio, Button, Input} from 'antd'
import TextArea from 'antd/lib/input/TextArea'
interface typeFormJSONInput {
type: 'input';
// 展現標題
title: string;
// 是不是必填/必選,默認必填/必選
required?: boolean;
// 設置寬度,默認100%
width?: string;
// 是不是文本域, 默認否
textArea?: boolean;
// 文本域的rows
rows?: number;
// 正則
pattern?: RegExp;
// 自定義消息 默認: 請輸入+title
message?: string;
}
interface typeFormJSONRadios {
type: 'radios';
// 展現標題
title: string;
// 數組數據
data: string[];
// 是不是必填/必選,默認必填/必選
required?: boolean;
}
export type typeFormJSON = (typeFormJSONInput | (typeFormJSONRadios))[]
export function JSONToForm({json}: {json: typeFormJSON}){
return <div>
{json.map(row =>
row.type == 'radios' ? <Form.Item label={row.title} name={row.title} rules={[{
required: row.required !== void 0 ? row.required : true,
message: `請選擇${row.title}`
}]}>
<Radio.Group onChange={(e) => console.log(e)} value={row.title}>
{row.data.map(dateItem => <Radio value={dateItem}>{dateItem}</Radio>)}
</Radio.Group>
</Form.Item> :
row.type == 'input' ? <Form.Item label={row.title} name={row.title} rules={[{
required: row.required !== void 0 ? row.required : true,
pattern: row.pattern,
message: row.message || `請輸入${row.title}`
}]}>
{row.textArea
? <TextArea rows={row.rows} value={row.title} placeholder={`請輸入${row.title}`} />
: <Input style={{width: row.width}} value={row.title} placeholder={`請輸入${row.title}`} />}
</Form.Item> :
<></>
)}
</div>
}
複製代碼
這裏用到了antd
作form的主要渲染,而後咱們要作的就是改爲json渲染的形式。bash
點擊獲取到的值antd
而後把這個json化再傳給後臺,後臺管理系統展現的時候,再Object.kes渲染便可。數據結構
--完--async