react小案例练习（antd Table获取行数据对话框显示，可修改）_java

一、引言

二、demo文件结构

三、核心代码

一、引言

要实现对列表的增、删、改功能：对于列表的各行数据可以直接删除，显示数据（对话框显示）并能修改，保存新数据；也可新增新一行的数据。

效果图如下：

test - StackBlitz -

二、demo文件结构

三、核心代码

App.js

注释：

1. lodash是一套工具库，内部封装了很多字符串、数组、对象等常见数据类型的处理函数。

2. lodash的所有函数都不会在原有的数据上进行 *** 作，而是复制出一个新的数据而不改变原有数据。类似immutable.js的理念去处理。

3. lodash 的 cloneDeep 方法是对数据进行深拷贝，不清楚深浅拷贝的可以看看我上一篇文章超清晰，一文理解：深拷贝与浅拷贝（js）

4. Form.useForm()创建 Form 实例，用于管理所有数据状态，对表单数据域进行交互。相关api 可参考 antd-Form 官网

5. EditorModal 是专门封装的对话框组件，见下文。

import React, { useState } from 'react';
import { Table, Tag, Space, Card, Popconfirm, Button } from 'antd';
import { cloneDeep } from 'lodash';
import EditorModal from './components/editor-modal';
import { tableData } from './mock';
import './style.css';

export default function App() {
  const [editorModalVisible, setEditorModalVisible] = useState(false);
  const [record, setRecord] = useState(null);
  const [isNew, setIsNew] = useState(false);
  const [dataSource, setDataSource] = useState(tableData);

  const handleDel = (record) => {
    setDataSource(dataSource.filter((item) => item.key !== record.key));
  };

  const showEditor = (record, isNew = false) => {
    setEditorModalVisible(true);
    setIsNew(isNew);
    if (isNew) {
      setRecord({ key: dataSource[dataSource.length - 1].key++ });
    } else {
      setRecord(cloneDeep(record));
    }
  };

  const handleOk4EditorModal = (data) => {
    if (isNew) {
      let newDataSource = [...dataSource, data];
      setDataSource(newDataSource);
    } else {
      const newDataSource = dataSource.map((item) => {
        if (item.key === data.key) {
          return { ...item, ...data };
        } else {
          return item;
        }
      });
      setDataSource(newDataSource);
    }
    setEditorModalVisible(false);
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: (text) => {text},
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Gender',
      dataIndex: 'gender',
      key: 'gender',
      render(text, record) {
        return ['female', 'male'][record.gender];
      },
    },
    {
      title: 'Tags',
      key: 'tags',
      dataIndex: 'tags',
      render: (tags) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? 'geekblue' : 'green';
            if (tag === 'loser') {
              color = 'volcano';
            }
            return (
              
                {tag.toUpperCase()}
              
            );
          })}
        
      ),
    },
    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        
           showEditor(record)}>Edit
           handleDel(record)}
          >
             Delete 
          
        
      ),
    },
  ];

  const afterClose = () => {
    setRecord(null);
    setIsNew(false);
  };
  return (
    
      完成列表的增、删、改功能

       setEditorModalVisible(false)}
        handleOk={handleOk4EditorModal}
        afterClose={afterClose}
        isNew={isNew}
      />
      
    
  );
}
 
/components/editor-modal/index.js 
注释： 
        1. 主体部分就是一个 Modal对话框 包裹一个 Form 表单，该组件配置6个属性参数用于数据交互及d框显示。 
        2. 代码前半部分主要是一些初始和副作用钩子的设置，数据更新的原则为不直接 *** 作原数据！ 
import React, { useEffect } from 'react';
import { Form, Modal, Radio, Input, InputNumber, Select } from 'antd';
const noop = () => {};
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
};

const EditorModal = (props) => {
  const {
    visible,
    record,
    handleOk = noop,
    handleCancel = noop,
    afterClose,
    isNew,
  } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible) {
      form.setFieldsValue(record);
    } else {
      form.resetFields();
    }
  }, [visible]);

  const onOk = () => {
    const values = form.getFieldsValue();
    handleOk({ ...record, ...values });
  };

  return (
    
      
        
          
        
        
          
            Female
            Male