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();

    <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 方法,都是可以统一获取值的。

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果您想在使用Ant Design的ModalForm组件时,将自定义组件传递给ModalForm组件,并在ModalForm组件中使用该自定义组件,并在其他页面中使用onFinish异步方法,可以按照以下步骤进行操作: 1. 在自定义组件中定义一个onFinish方法,该方法将在ModalForm组件中调用并处理表单数据。 2. 将自定义组件作为ModalForm组件的一个表单项传递,并将onFinish方法作为自定义组件的一个属性进行传递。 3. 在其他页面中,定义一个异步的onFinish方法,并将其作为ModalForm组件的onFinish属性进行传递。 下面是一个示例代码,您可以参考这个示例来理解如何在Ant Design中使用自定义组件和ModalForm组件: ``` // 自定义组件 MyComponent.js import React from 'react'; import { Form, Input } from 'antd'; const MyComponent = ({ onFinish }) => { return ( <Form onFinish={onFinish}> <Form.Item name="name" label="名字"> <Input /> </Form.Item> <Form.Item name="age" label="年龄"> <Input /> </Form.Item> </Form> ); }; export default MyComponent; // 在页面中调用 ModalForm.js import React from 'react'; import { Modal, Button } from 'antd'; import MyComponent from './MyComponent'; const ModalForm = ({ onFinish }) => { return ( <Modal title="标题" visible={true} footer={null}> <MyComponent onFinish={onFinish} /> </Modal> ); }; export default ModalForm; // 其他页面 OtherPage.js import React from 'react'; import { Modal, Button } from 'antd'; import ModalForm from './ModalForm'; const OtherPage = () => { const onFinish = async (values) => { console.log(values); // 异步处理表单数据 }; return ( <div> <Button type="primary" onClick={() => setVisible(true)}> 打开 Modal </Button> <ModalForm onFinish={onFinish} /> </div> ); }; export default OtherPage; ``` 在这个示例代码中,我们定义了一个自定义组件MyComponent,该组件包含一个Form表单,并且定义了一个onFinish方法,用于处理表单数据。 然后,在ModalForm组件中,我们将自定义组件作为一个表单项传递,并将onFinish方法作为自定义组件的一个属性进行传递。 最后,在其他页面中,我们定义了一个异步的onFinish方法,并将其作为ModalForm组件的onFinish属性进行传递。这样,在ModalForm组件中,当用户提交表单时,onFinish方法将被调用,并且表单数据将被传递到外部的onFinish方法中进行异步处理

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值