新增和修改数据，封装一个组件，运用于不同页面和不同类型，form表单中有可编辑的表格（父子传值，antd-Form表单的二次封装）

最新推荐文章于 2023-07-26 12:03:52 发布

ZHANGJIN9546

最新推荐文章于 2023-07-26 12:03:52 发布

阅读量939

点赞数 1

分类专栏：案例

本文链接：https://blog.csdn.net/ZHANGJIN9546/article/details/103715860

版权

本文介绍如何创建一个可复用的组件，该组件在不同的页面和场景中用于新增和修改数据。通过封装antd的Form表单，实现父子组件间的数据传递，以实现表格内的编辑功能。

摘要由CSDN通过智能技术生成

import React, { Component } from 'react';
import { Table,Button,Input,Icon,Form,message,Modal,Select,DatePicker,Upload,Pagination,Tooltip,InputNumber,Col, Row,Radio,Tabs, Layout} from 'antd';
import { user,service } from '@/utils/ajax';
import {removeEmptyField} from '@/utils';

import './index.scss';
const { Column } = Table;

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;   
const { TabPane } = Tabs;
//定义表单内部样式
const FormItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 3 }
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 21 }
    }
   }; 
   //定义input框的样式
   const FormItemLayoutChild = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
   }; 
//在react中使用antd创建可编辑的表格，使用createContext( )

const EditableContext = React.createContext();

//1.自己新建两个组件Provider
//2.Provider有一个参数value
//3.在Provider组件内遍历子组件，

const EditableRow = ({ form, index, ...props }) => (
  <EditableContext.Provider value={form}>
    <tr {...props} />
  </EditableContext.Provider>
);

const EditableFormRow = Form.create()(EditableRow);

class EditableCell extends React.Component {
  state = {
    editing: false,
  };

  toggleEdit = () => {
    const editing = !this.state.editing;
    this.setState({ editing }, () => {
      if (editing) {
        this.input.focus();
      }
    });
  };

  save = e => {
    const { record, handleSave } = this.props;
    this.form.validateFields((error, values) => {
      if (error && error[e.currentTarget.id]) {
        return;
      }
      this.toggleEdit();
      handleSave({ ...record, ...values });
    });
  };

  renderCell = form => {
    this.form = form;
    const { children, dataIndex, record, title } = this.props;
    const { editing } = this.state;
    return editing ? (
      <Form.Item style={
  { margin: 0 }}>
        {form.getFieldDecorator(dataIndex, {
          rules: [
            // {
            //   required: true,
            //   message: `${title} is required.`,
            // },
          ],
          initialValue: record[dataIndex],
        })(<Input ref={node => (this.input = node)} onPressEnter={this.save} onBlur={this.save} />)}
      </Form.Item>
    ) : (
      <div
        className="editable-cell-value-wrap"
        style={
  { paddingRight: 24 }}
        onClick={this.toggleEdit}
      >
        {children}
      </div>
    );
  };

  render() {
    const {
      editable,
      dataIndex,
      title,
      record,
      index,
      handleSave,
      children,
      ...restProps
    } = this.props;
    return (
      <td {...restProps}>
        {editable ? (
          <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
        ) : (
          children
        )}
      </td>
    );
  }
}
class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            formStatic:[
                {name:'name',attr:{placeholder:'接口名称'}, label:"接口名称：",value:'',rules:[{required:true,message:'接口名称不能为空'}]},
                {name:'type',attr:{placeholder:'服务类型'}, label:"服务类型：",value:'',rules:[{required:true,message:'服务类型不能为空'}]},
                {name:'provider',attr:{placeholder:'服务提供人'}, label:"服务提供人：",value:'',rules:[{required:true,message:'服务提供人不能为空'}]},
                {name:'effectiveDate',attr:{placeholder:'生效日期'}, label:"生效日期：",value:'',rules:[{required:false,message:'生效日期不能为空'}]},
                {name:'description',attr:{placeholder:'服务描述'}, label:"服务描述：",value:'',rules:[{required:true,message:'服务描述不能为空'}]},
                {name:'normalCode',attr:{placeholder:'成功返回值'}, label:"成功返回值：",value:'',rules:[{required:true,message:'成功返回值不能为空'},{pattern: new RegExp(/^[0-9]{1,}$/, "g") , message: '状态码只允许包含0及以上纯数字！'}]},

            ],
            returnExample:'',
            btnValue:"测试",
            url:'',
            serviceTypeData:[],
            requestTypeData:[],
            Params:[{id:0,key:"",value:''}],
            Headers:[{id:0,key:"",value:''}],
            bodytext:'',
            tabsActive:"Params",
            columns:[
                {
                    title: 'key',
                    dataIndex: 'k