[JavaScript知识库]antd 可编辑增加的table

父组件

import TargetForm from './compoent/targetform'


// 提交数据
  handleTarget = () => {
    this.child.validateFields((err, values) => {
      if (!err) {
        console.log(values);

      }
    });
  };

<Modal
          title="设置目标系统"
          visible={isModalVisible}
          okText="确认"
          cancelText="取消"
          onCancel={() => {
            this.setState({ isModalVisible: false });
            this.props.form.setFieldsValue({ ip: targetIp });
          }}
          onOk={() => {
            this.setState({ isModalVisible: false, targetIp });
            this.handleTarget()
          }}
        >

          <TargetForm ref={child => (this.child = child)}></TargetForm>
        </Modal>

子组件

import React, { Component } from "react";
import { Form, Input, Button, Table, Divider, Popconfirm } from 'antd';
import { PlusOutlined } from '@ant-design/icons';


class TargetForm extends Component {
    state = {
        targetIp: 'http://10.136.106.77:30080/',
        dataSource: [],
        count: 0,
    };

    componentDidMount() {
    }

    //添加一行
    handleAdd = () => {
        const { count, dataSource } = this.state;
        const newData = {
            key: count,
            name: "",
            example: "",
            save: false,
            editable: false
        };
        this.setState({
            dataSource: [...dataSource, newData],
            count: count + 1
        });
    };
    //编辑一行
    toggleEditable = (
        e,
        key,
        name
    ) => {
        let newData = [];
        newData = [...this.state.dataSource];
        const index = newData.findIndex(item => key === item.key);
        newData[index].save = false;
        newData[index].editable = false;
        this.setState({
            dataSource: newData
        });
    };
    //保存一行
    saveRow = (e, key) => {
        this.props["form"].validateFields(
            [
                `table[${key}].name`,
                `table[${key}].example`
            ],
            (err, values) => {
                if (!err) {
                    let newData = [];
                    newData = [...this.state.dataSource];
                    const index = newData.findIndex(item => key === item.key);
                    newData[index].save = true;
                    newData[index].editable = true;
                    this.setState({
                        dataSource: newData
                    });
                }
            }
        );
    };
    //删除一行
    handleDelete = (key) => {
        const newData = [...this.state.dataSource];
        this.setState({
            dataSource: newData.filter((item) => item.key !== key)
        });
    };
    //当行的值改变时
    handleFieldChange = (
        e,
        keyName,
        key
    ) => {
        let newData = [];
        newData = [...this.state.dataSource];
        const index = newData.findIndex(item => key === item.key);
        if (keyName === "name" || keyName === "example") {
            newData[index][keyName] = e.target.value;
        } else {
            newData[index][keyName] = e;
        }
        this.setState({
            dataSource: newData
        });
    };
    render() {
        const { targetIp, dataSource } = this.state
        const { getFieldDecorator } = this.props.form;
        const columns = [
            {
                title: "参数名",
                dataIndex: "name",
                width: "40%",
                render: (text, record, index) => {
                    if (!record.save) {
                        return (
                            <Form.Item key={index}>
                                {getFieldDecorator(`table[${record.key}].name`, {
                                    initialValue: text ? text : undefined,
                                    rules: [
                                        {
                                            required: true,
                                            message: "请输入参数名！",
                                            min: 1,
                                            max: 64
                                        }
                                    ]
                                })(
                                    <Input
                                        placeholder="请输入参数名"
                                        autoFocus
                                        onChange={e =>
                                            this.handleFieldChange(e, "name", record.key)
                                        }
                                    />
                                )}
                            </Form.Item>
                        );
                    }
                    return (
                        <Form.Item key={index}>
                            {getFieldDecorator(`table[${record.key}].name`, {
                                initialValue: text ? text : undefined
                            })(<span>{text}</span>)}
                        </Form.Item>
                    );
                }
            },
            {
                title: "参数值",
                dataIndex: "example",
                width: "40%",
                render: (text, record, index) => {
                    if (!record.save) {
                        return (
                            <Form.Item key={index}>
                                {getFieldDecorator(`table[${record.key}].example`, {
                                    initialValue: text ? text : undefined,
                                    rules: [{ required: true, message: "请输入参数值！" }]
                                })(
                                    <Input
                                        placeholder="请输入参数值"
                                        autoFocus
                                        onChange={e =>
                                            this.handleFieldChange(e, "example", record.key)
                                        }
                                    />
                                )}
                            </Form.Item>
                        );
                    }
                    return (
                        <Form.Item key={index} style={{ width: "200px" }}>
                            {getFieldDecorator(`table[${record.key}].example`, {
                                initialValue: text ? text : undefined
                            })(<span>{text}</span>)}
                        </Form.Item>
                    );
                }
            },
            {
                title: "操作",
                dataIndex: "operation",
                width: "20%",
                render: (text, record) => {
                    if (record.editable) {
                        return (
                            <span>
                                <a
                                    onClick={e =>
                                        this.toggleEditable(e, record.key, "removeheader")
                                    }
                                >
                                    编辑
                                </a>
                                <Divider type="vertical" />
                                <Popconfirm
                                    title="是否要删除此行？"
                                    onConfirm={() => this.handleDelete(record.key)}
                                >
                                    <a>删除</a>
                                </Popconfirm>
                            </span>
                        );
                    } else {
                        return (
                            <span>
                                <a
                                    onClick={e => {
                                        this.saveRow(e, record.key);
                                    }}
                                >
                                    保存
                                </a>
                                <Divider type="vertical" />
                                <Popconfirm
                                    title="是否要删除此行？"
                                    onConfirm={() => this.handleDelete(record.key)}
                                >
                                    <a>删除</a>
                                </Popconfirm>
                            </span>
                        );
                    }
                }
            }
        ];
        return (
            <Form >
                <Form.Item label="目标系统" labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}>
                    {getFieldDecorator('ip', {
                        initialValue: targetIp ? targetIp : undefined,
                        rules: [{ required: true, message: '请输入目标系统IP地址!' }]
                    })(<Input placeholder="请输入目标系统IP地址" />)}
                </Form.Item>
                请求头配置
                <Table
                    pagination={false}
                    columns={columns}
                    dataSource={dataSource}
                />
                <Button
                    style={{ width: "100%", marginTop: 16, marginBottom: 8 }}
                    type="dashed"
                    onClick={() => {
                        this.handleAdd();
                    }}
                >
                    <PlusOutlined />
                    添加参数
                </Button>
            </Form>
        );
    }
}

export default Form.create()(TargetForm);

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖