使用 antd 中的 Form 组件时,若使用自定义组件时,保存的时候获取不到自定义组件中的值。
以下是从antd找到的解决思路:
被设置了 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 方法,都是可以统一获取值的。