antd form表单 处理自定义组件

使用 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();<Formname="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><AddRowTableref={addRowTable}dataSource={headerList}columns={columns}isCanAdd={isLook}disabled={isLook}addItem={handleAddTableRow.bind(this)}/></div>}export default HeaderTable;

以上操作就可以在表单中使用自定义组件，表单也能统一获取值。不仅仅input输入框可以这么操作，所有组件，只要你拿到值后，把值给 onChange 方法，都是可以统一获取值的。