antd form表單如何處理自定義組件
antd form表單處理自定義組件
使用 antd 中的 Form 組件時,若使用自定義組件時,保存的時候獲取不到自定義組件中的值。
以下是從antd找到的解決思路
被設(shè)置了 name 屬性的 Form.Item 包裝的控件,表單控件會自動添加 value(或 valuePropName 指定的其他屬性) onChange(或 trigger 指定的其他屬性)
我們可以通過表單控件自動添加的onChage,來做數(shù)據(jù)收集同步。
父組件:
import React, { Fragment, useState, useEffect, forwardRef, useRef } from 'react';
import HeaderTable from './headerTable';
const BasicForm = forwardRef((props, ref) => {
? const { record } = props;
? const [ form ] = Form.useForm();
? ? <Form
? ? ? ? ? name="taskForm"
? ? ? ? ? ref={ref}
? ? ? ? ? form={form}
? ? ? ? >
? ? ? ? <Row gutter={20}>
? ? ? ? ? ? <Col span={24}>
? ? ? ? ? ? ? <Form.Item ?name="headers" label={'Header'}>
? ? ? ? ? ? ? ? <HeaderTable ref={headerTableRef} record={record} />
? ? ? ? ? ? ? </Form.Item>
? ? ? ? ? ? </Col>
? ? ? ? ? </Row>
? ? </Form>
export default BasicForm;子組件:
import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef} from 'react';
import { Transfer, Divider, Table, Button, Input, message, Select } from 'antd';
import AddRowTable from '@components/AddRowTable';//Table組件
const { Option } = Select;
const DATATYPE = [
?? ?{
?? ??? ?id: 1,
?? ??? ?name: 'int'
?? ?}, {
?? ??? ?id: 2,
?? ??? ?name: 'varchar'
?? ?}
]
const HeaderTable = ( props, ref ) => {
?? ?const { record, isLook, onChange } = props;
?? ?const addRowTable = useRef();
?? ?const [ sourceData, setSourceData ] = useState([]);
?? ?const [ columns, setColumns ] = useState([]);
?? ?const [ targetKeys, setTargetKeys ] = useState([]);
?? ?const [ headerList, setHeaderList ] = useState([]);
?? ?useEffect(() => {
?? ??? ?if (record && record.id) {//當(dāng)編輯時將傳來的數(shù)據(jù)賦值
?? ??? ??? ?setHeaderList(record.sourceInfoMap.headers)
?? ??? ?}
?? ?}, [record])
? ? ? ??
? ? ? ? //設(shè)置columns表頭
? ? ? ? useEffect(() => {
? ? ? ? const columns = [
?? ?{
? ? ? ? ? ? title: '參數(shù)名稱',
? ? ? ? ? ? dataIndex: 'name',
? ? ? ? ? ? render: (text, record) => {
?? ??? ?return (
?? ??? ??? ?<Input value={text} onChange={tableItemChange.bind(this, record, 'name')} />
?? ??? ??? ?);
?? ??? ?}
?? ?},
? ? ? ? {
? ? ? ? ? ? title: '操作',
? ? ? ? ? ? dataIndex: 'operation',
? ? ? ? ? ? align: 'center',
? ? ? ? ? ? render: (text, record, index) => {
?? ??? ?return (
? ? ? ? ? ? ? ? ? ? <a onClick={delHandle.bind(this, record, index)}>'Delete'</a>
? ? ? ? ? ? ? ? ? ? ? ? );
?? ??? ?}
?? ?}];
? ? ? ??
? ? ? ? setColumns(columns);
? ? ? ??
? ? ? ? },[])
?? ?// 添加一行
?? ?const handleAddTableRow = () => {
?? ??? ?setHeaderList(headerList => [...headerList, {}]);
?? ??? ?onChange(headerList => [...headerList, {}])
?? ?};
?? ?// 刪除一行
?? ?const delHandle = (record, index) => {
?? ??? ?setHeaderList(headerList => {
?? ??? ??? ?headerList.splice(index, 1);
?? ??? ??? ?onChange(headerList)
?? ??? ??? ?return [...headerList];
?? ??? ?});
?? ?};
?? ?// 表格中數(shù)據(jù)更改
?? ?const tableItemChange = (data, keyField, evt) => {
?? ??? ?const value = evt.target ? evt.target.value : evt;
?? ??? ?data[keyField] = value;
?? ??? ?onChange(headerList)
?? ?};
?? ?return <div>
?? ??? ?<AddRowTable
?? ??? ??? ?ref={addRowTable}
?? ??? ??? ?dataSource={headerList}
?? ??? ??? ?columns={columns}
?? ??? ??? ?isCanAdd={isLook}
? ? ? disabled={isLook}
?? ??? ??? ?addItem={handleAddTableRow.bind(this)}
?? ??? ?/>
?? ?</div>
}
export default HeaderTable;以上操作就可以在表單中使用自定義組件,表單也能統(tǒng)一獲取值。
不僅僅input輸入框可以這么操作,所有組件,只要你拿到值后,把值給 onChange 方法,都是可以統(tǒng)一獲取值的。
antd form表單中嵌套自定義組件
當(dāng)某些自定義的組合類組件,也希望能進(jìn)行表單元素的校驗,以及利用antd的form表單實例進(jìn)行數(shù)據(jù)的修改或者數(shù)據(jù)獲取,這招便可以派上用場啦~
表單部分
<Form.Item label="周期" labelAlign="right">
{getFieldDecorator('cycle', {
rules: [{ required: true, validator: checkCycle }],
initialValue: cycle,
})(<CycleInput cycleOptions={cycleOptions} />)}
</Form.Item>
表單部分可以引入自定義的校驗邏輯,如上面的checkCycle :
可以像下面這樣,通過Promise.reject()返回錯誤校驗提示,通過Promise.resolve()正確通過校驗。
/** 校驗生命周期輸入內(nèi)容 */
const checkCycle = useCallback((_, value) => {
const format = value?.split(' ');
if (!format) return Promise.reject(new Error('周期不可為空!'));
/** always 永久保存選項 */
if (format.length < 2 && format[0] === 'always') {
return Promise.resolve();
}
if (format[1] === 'undefined') {
return Promise.reject(new Error('請選擇周期!'));
}
const num = +format[0];
if (num > 0 && format[1]) {
return Promise.resolve();
}
return Promise.reject(new Error('請輸入大于 0 的數(shù)字!'));
}, []);
有關(guān)校驗的內(nèi)容,antd也是參考一個成熟的庫 async-validator,上面這種寫法可以參考文檔這塊 asyncValidator
如果懶得看文檔直接看圖:

大概意思就是說,可以通過兩種方式來實現(xiàn)一些異步校驗:
(1)可以通過調(diào)用callback,即asyncValidator的第三個參數(shù),來完成校驗
(2)可以通過返回Promise,來完成校驗
自定義組件
注意value是該表單域的值,onChange是對應(yīng)可以改變該表單域的值的方法
const CycleInput = ({ value, onChange, cycleOptions }) => {
const format = value?.split?.(' ');
const num = format?.[0];
const type = format?.[1];
const triggerChange = changedValue => {
onChange && onChange(changedValue);
};
/** 根據(jù)后端接口返回的數(shù)據(jù),type 有值,則為 day、week、month、year 其一 */
/** type 若為 undefined,則 num 為 always */
const [cycleOption, setCycleOption] = useState(type ?? num);
const [cycleInputValue, setCycleInputValue] = useState(
(typeof +num === 'number' && !_.isNaN(+num) && num) || '',
);
const onCycleChange = cycleOption => {
setCycleOption(cycleOption);
triggerChange(
cycleOption === 'always'
? cycleOption
: `${cycleInputValue} ${cycleOption}`,
);
};
const onInputChange = e => {
const newNumber = parseInt(e.target.value || '0', 10);
if (_.isNaN(newNumber)) {
return;
}
setCycleInputValue(newNumber);
triggerChange(
cycleOption === 'always' ? cycleOption : `${newNumber} ${cycleOption}`,
);
};
return (
<Input.Group>
{cycleOption === 'always' ? (
<Select
onChange={onCycleChange }
defaultValue={cycleOption}
style={{ width: 240 }}
>
{cycleOptions.map(item => (
<Select.Option key={item.value} value={item.value}>
{item.label}
</Select.Option>
))}
</Select>
) : (
<span>
<Input
value={cycleInputValue}
style={{ width: 156 }}
onChange={onInputChange}
/>
<Select
onChange={onCycleChange}
defaultValue={cycleOption}
style={{ width: 84 }}
>
{cycleOptions.map(item => (
<Select.Option key={item.value} value={item.value}>
{item.label}
</Select.Option>
))}
</Select>
</span>
)}
</Input.Group>
);
};
可以看出,自定義部分邏輯也比較簡單,通過value參數(shù)可以展示組件的值,通過onChange方法,可以改變表單域的值,實現(xiàn)了表單帶給我們的便捷功能。
總結(jié)
到此結(jié)束啦,快試試吧,實踐出真知呀!
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
React Native仿美團(tuán)下拉菜單的實例代碼
本篇文章主要介紹了React Native仿美團(tuán)下拉菜單的實例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
關(guān)于React動態(tài)加載路由處理的相關(guān)問題
這篇文章主要介紹了關(guān)于React動態(tài)加載路由處理的相關(guān)問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
React創(chuàng)建組件的三種方式及其區(qū)別是什么
在React中,創(chuàng)建組件的三種主要方式是函數(shù)式組件、類組件和使用React Hooks的函數(shù)式組件,本文就詳細(xì)的介紹一下如何使用,感興趣的可以了解一下2023-08-08
ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解
這篇文章主要為大家介紹了ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
如何在 React 中調(diào)用多個 onClick 函數(shù)
這篇文章主要介紹了如何在React中調(diào)用多個onClick函數(shù),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
React實現(xiàn)組件間通信的幾種方式小結(jié)
在React應(yīng)用中,組件間的通信是一個基礎(chǔ)而關(guān)鍵的概念,理解和掌握不同組件之間的通信方式,可以幫助我們構(gòu)建出更加模塊化、可維護(hù)和可擴(kuò)展的應(yīng)用程序,React提供了多種組件通信的方法,本文給大家詳細(xì)的介紹了這些方法,需要的朋友可以參考下2024-07-07
React框架快速實現(xiàn)簡易的Markdown編輯器
這篇文章主要為大家介紹了使用React框架實現(xiàn)簡易的Markdown編輯器,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04
React從react-router路由上做登陸驗證控制的方法
本篇文章主要介紹了React從react-router路由上做登陸驗證控制的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05

