【九】从零搭建react-新 自定义函数组件+传参

1.customerForm.js

import React, { useState } from 'react';
import {Table, Input, Select, Popconfirm, Form, Typography, Button, Modal} from 'antd';

const {Option} = Select;

const EditableCell = ({
                          editing,
                          dataIndex,
                          title,
                          inputType,
                          require,
                          record,
                          index,
                          children,
                          ...restProps
                      }) => {

    let inputNode = <Input />;

    if(inputType === 'select_type'){
        inputNode = <Select allowClear={false}>
            <Option value="单行文本">单行文本</Option>
            <Option value="多行文本">多行文本</Option>
            <Option value="单选">单选</Option>
            <Option value="多选">多选</Option>
            <Option value="下拉">下拉</Option>
        </Select>;
    }else if(inputType === 'select_must'){
        inputNode = <Select allowClear={false}>
            <Option value="是">是</Option>
            <Option value="否">否</Option>
        </Select>;
    }

    return (
        <td {...restProps}>
            {editing ? (
                <Form.Item
                    name={dataIndex}
                    style={{
                        margin: 0,
                    }}
                    rules={require?[
                        {
                            required: true,
                            message: `${title}必填!`,
                        },
                    ]:''}
                >
                    {inputNode}
                </Form.Item>
            ) : (
                children
            )}
        </td>
    );
};

const CustomerForm = (props) => {

    const {visible,onOk,onCancel,custom_table} = props;

    const [form] = Form.useForm();
    const [data, setData] = useState(custom_table);
    const [editingKey, setEditingKey] = useState('');

    const isEditing = (record) => record.key === editingKey;

    const addItem = () => {
        const newData = [...data];
        let key = 0;
        newData.map((item,index)=>{
            if(item.key > key){
                key = item.key
            }
        })
        newData.push({
                key: ''+(parseInt(key)+1),
                item_title: ` `,
                item_type: '',
                item_options: ``,
                item_must: ``,
                item_sort: `99`
            }
        )
        setData(newData)
    };

    const edit = (record) => {
        form.setFieldsValue({
            item_title: '',
            item_type: '',
            item_options: '',
            item_must: '',
            item_sort: '',
            ...record,
        });
        setEditingKey(record.key);
    };

    const cancel = () => {
        setEditingKey('');
    };

    const del = (record,index) => {
        const newData = [...data];
        newData.splice(index,1)
        setData(newData)
    };


    const save = async (key) => {
        try {
            const row = await form.validateFields();
            const newData = [...data];
            const index = newData.findIndex((item) => key === item.key);
            if (index > -1) {
                const item = newData[index];
                newData.splice(index, 1, { ...item, ...row });
                newData.sort((x, y) => {
                    return x.item_sort - y.item_sort;
                });
                setData(newData);
                setEditingKey('');
            } else {
                newData.push(row);
                newData.sort((x, y) => {
                    return x.item_sort - y.item_sort;
                });
                setData(newData);
                setEditingKey('');
            }
        } catch (errInfo) {
            console.log('Validate Failed:', errInfo);
        }
    };

    const columns = [
        {
            title: '标题',
            dataIndex: 'item_title',
            type:'input',
            require:true,
            width: '20%',
            editable: true,
        },
        {
            title: '类型',
            dataIndex: 'item_type',
            type:'select_type',
            require:true,
            width: '15%',
            editable: true,
        },
        {
            title: '待选项',
            dataIndex: 'item_options',
            type:'input',
            require:false,
            width: '20%',
            editable: true,
        },
        {
            title: '是否必填',
            dataIndex: 'item_must',
            type:'select_must',
            require:true,
            width: '10%',
            editable: true,
        },
        {
            title: '排序',
            dataIndex: 'item_sort',
            type:'input',
            require:true,
            width: '10%',
            editable: true,
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (a, record, index) => {
                const editable = isEditing(record);
                return editable ? (
                    <span>
                        <Typography.Link
                            onClick={() => save(record.key)}
                            style={{
                                marginRight: 8,
                            }}
                        >
                          保存
                        </Typography.Link>
                        <Popconfirm title="确定取消?" onConfirm={cancel}>
                          <a>取消</a>
                        </Popconfirm>
                    </span>
                ) : (
                    <span>
                        <Typography.Link disabled={editingKey !== ''} onClick={() => edit(record)}>
                            编辑
                        </Typography.Link>
                        <Typography.Link disabled={editingKey !== ''} onClick={() => del(record,index)}>
                            &nbsp;&nbsp;删除
                        </Typography.Link>
                    </span>
                );
            },
        },
    ];
    const mergedColumns = columns.map((col) => {
        if (!col.editable) {
            return col;
        }

        return {
            ...col,
            onCell: (record) => ({
                record,
                inputType: col.type ,
                dataIndex: col.dataIndex,
                require: col.require,
                title: col.title,
                editing: isEditing(record),
            }),
        };
    });
    return (
        <Modal width='1000px' visible={visible} onOk={()=>onOk(data)} onCancel={onCancel}>
            <Form form={form} component={false}>
                <Button onClick={addItem}>新增</Button>
                <Table
                    components={{
                        body: {
                            cell: EditableCell,
                        },
                    }}
                    bordered
                    dataSource={data}
                    columns={mergedColumns}
                    rowClassName="editable-row"
                    onRow={record =>{}}
                    pagination={false}
                />
            </Form>
        </Modal>
    );
};

export default CustomerForm;

2.customerForm.less

.editable-row .ant-form-item-explain {
  position: absolute;
  top: 100%;
  font-size: 12px;
}

3.调用

<Button type="primary" onClick={showModal}>
    自定义表单
</Button>


<CustomerForm visible={isModalVisible} custom_table={custom_table} onOk={ModalOk} onCancel={handleCancel} />


const [custom_table, setCustom_table] = useState([]);
const [isModalVisible, setIsModalVisible] = useState(false);

const showModal = () => {
    setIsModalVisible(true);
};

const ModalOk = (data) => {
    console.log('getData',data)
    setCustom_table(data);
    setIsModalVisible(false);
};

const handleCancel = () => {
    setIsModalVisible(false);
};

本文为看恩吧原创文章,转载无需和我联系,但请注明来自knsay.com

打赏

• 上一篇： 【八】从零搭建react-新 路由传参
• 下一篇： MyCat学习笔记