溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下antd form表單怎么處理自定義組件的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
使用 antd 中的 Form 組件時，若使用自定義組件時，保存的時候獲取不到自定義組件中的值。
被設置了 name 屬性的 Form.Item 包裝的控件，表單控件會自動添加 value（或 valuePropName 指定的其他屬性） onChange（或 trigger 指定的其他屬性）
我們可以通過表單控件自動添加的onChage，來做數據收集同步。
父組件：
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) {//當編輯時將傳來的數據賦值
setHeaderList(record.sourceInfoMap.headers)
}
}, [record])
//設置columns表頭
useEffect(() => {
const columns = [
{
title: '參數名稱',
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];
});
};
// 表格中數據更改
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;以上操作就可以在表單中使用自定義組件，表單也能統一獲取值。
不僅僅input輸入框可以這么操作，所有組件，只要你拿到值后，把值給 onChange 方法，都是可以統一獲取值的。
當某些自定義的組合類組件，也希望能進行表單元素的校驗，以及利用antd的form表單實例進行數據的修改或者數據獲取，這招便可以派上用場啦~
<Form.Item label="周期" labelAlign="right">
{getFieldDecorator('cycle', {
rules: [{ required: true, validator: checkCycle }],
initialValue: cycle,
})(<CycleInput cycleOptions={cycleOptions} />)}
</Form.Item>表單部分可以引入自定義的校驗邏輯，如上面的checkCycle ：
可以像下面這樣，通過Promise.reject()返回錯誤校驗提示，通過Promise.resolve()正確通過校驗。
/** 校驗生命周期輸入內容 */
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 的數字!'));
}, []);有關校驗的內容，antd也是參考一個成熟的庫 async-validator，上面這種寫法可以參考文檔這塊 asyncValidator
如果懶得看文檔直接看圖：
大概意思就是說，可以通過兩種方式來實現一些異步校驗：
（1）可以通過調用callback，即asyncValidator的第三個參數，來完成校驗
（2）可以通過返回Promise，來完成校驗
注意value是該表單域的值，onChange是對應可以改變該表單域的值的方法
const CycleInput = ({ value, onChange, cycleOptions }) => {
const format = value?.split?.(' ');
const num = format?.[0];
const type = format?.[1];
const triggerChange = changedValue => {
onChange && onChange(changedValue);
};
/** 根據后端接口返回的數據，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參數可以展示組件的值，通過onChange方法，可以改變表單域的值，實現了表單帶給我們的便捷功能。
以上就是“antd form表單怎么處理自定義組件”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
