react小案例练习(antd Table获取行数据对话框显示,可修改)

react小案例练习(antd Table获取行数据对话框显示,可修改),第1张

目录

一、引言

二、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