react - 使用json作form表單

咱們但願快速構建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

相關文章
相關標籤/搜索