antd提交表单_antd form表单数据回显操作

index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据

//index页面

import React from 'react'

import { Table, Button, message, Input, Select, Modal, } from 'antd';

const Option = Select.Option;

import AddOrEdit from './AddOrEdit '

class List extends React.Component {

constructor(props) {

super(props);

}

state = {

id: "",

selectOpt: {

getPopupContainer: () => {

return this.refs.myForm

}

},

tableOption: {

//表头

columns: [

{ title: '员工姓名', key: 'workerName', dataIndex: 'workerName' },

{ title: '员工工号', key: 'workNumber', dataIndex: 'workNumber' },

{

title: "操作", key: 'action', className: 'columnsCenter', render: (text, record) => {

return (

编辑

)

}

}

],

dataSource: [], //表格总数据

loading: false,

scroll: { x: 1600 },

//分页初始数据

pagination: {

current: 1, pageSize: 10, total: 0, showTotal: total => `共 ${total} 条`

}

},

//编辑表单详细信息

dataForm: {

data: [],

model: {

id: { value: undefined },

workerName: { value: undefined },//员工姓名

workNumber: { value: undefined }//员工工号

},

param: {}

},

//form表单模块

modalOption: {

title: "新增/修改",

visible: false,

footer: null,

destroyOnClose: true,

width: 900

},

}

//编辑数据回显

addOrEditClick(record) {

const self = this;

let { modalOption, dataForm } = this.state;

dataForm.param = JSON.parse(JSON.stringify(dataForm.model));

//如果是编辑弹出表单并且数据回显，否则就是新增

if (record.id) {

api.get(APIS.yluAssessTarget + record.id).then(function (response) {

const data = response.data.data;

dataForm.param.id.value = data.id;

//给

dataForm.param.workerName.value = data.workerName;

dataForm.param.workNumber.value = data.workNumber;

modalOption.visible = true;

self.setState({ modalOption, dataForm });

});

} else {

modalOption.visible = true;

self.setState({ modalOption });

}

}

//分页

onTableChange(pagination, filters, sorte) {

if (pagination.current) {

let { tableOption, searchObj } = this.state;

tableOption.pagination.current = pagination.current;

tableOption.pagination.pageSize = pagination.pageSize;

this.setState({ tableOption });

}

this.loadTable();

};

/**

* 初始化列表

*/

loadTable() {

let self = this, { tableOption } = this.state;

tableOption.loading = true;