大胆的鼠候会在react项目中遇到实时修改表数据的需求。 当然，直接访问qfdnm。
可以写在index.state.js上
import { observable，action，tojs } from‘mobx’；
class State {
@observable data=[]；
@observable columns=[
{
标题：‘name’，
数据索引：‘name’，
width :‘25 %’是、
可编辑：真
(，
{
标题：‘age’，
数据索引：‘age’，
width :‘15 %’是、
可编辑：真
(，
{
标题：‘地址’、
数据索引：‘地址’、
width :‘40 %’是、
可编辑：真
(，
{
标题：‘编辑’，
数据索引： ' edit
}
]；
}
导出默认新状态(；
写在index.component.jsx上的qfdnm
importreactfrom‘react’；
import { observer } from‘mobx-react’；
import { Table，Input，InputNumber，Popconfirm，form } from‘antd’；
import‘./index.less’；
importg2from‘@ antv/G2’；
importstatefrom‘./index.state’；
for(letI=0； i 100； I ) {
state.data.push({ (
key: i.toString ()、
name: Edrward ${i}，
age: 32，
address: London Park no. ${i}
)；
}
const礼貌的自行车=React.createContext (；
@observer
classmndbqextendsreact.com ponent {
getInput=() )。
if (this.props.input type==' number ' ) }
返回；
}
返回；
(；
const {
爱丁、
数据索引，
title，
输入类型，
记录，
索引
children，
. restProps
}=this.props；
return (
{editing？ （
{ getfield decorator (数据索引，
rules: [
{
要求： true，
message : ` please input $ { title }！ //判断不能为空，取消
}
]、
initial value : record [ data index ]
() ) this.getInput ) }
) : (
children
() ) ) )。
)；
(；
render ()。
return {this.renderCell}；
}
}
@observer
classcdycextendsreact.com ponent {
constructor{
super(props )；
this.state={ editingKey: '' }；
}
is editing=record=record.key==this.state.editing key；
cancel=() )。
this.setstate(editingkey:'} ' )；
(；
//保存方法
save(form，key ) {
FORM.validatefields((error，row )={
if(error ) (
返回；
}
const newData=[.state.data]；
const index=new data.findindex (item=key==item.key )；
if (索引-1) {
const item=newData[index]；
newdata.splice(index，1，{
.项目、
. row
)；
//。 row获取修改后的单行数据
state.data=newData；
this.setstate(editingkey:'} ' )；
} else {
newdata.push(row；
state.data=newData；
this.setstate(editingkey:'} ' )；
}
)；
}
edit(key ) {
this.setstate (editing key : key )；
}
//定制表格的内容
doColums=(arr )={
ARR.map((item，index )={
if(item.dataindex=='edit ' ) )。
item.render=(text，record ) )。
const { editingKey }=this.state；
const editable=this.is editing (record )；
return editable？ （
this.edit(Record.key ) }
)；
(；
}
)；
}
render ()。
const components={
body: {
蜂窝： Mn dbq
}
(；
const columns=state.columns.map (col={
if (！ col.editable ) {
返回核心；
}
return {
. col、
onCell: record=({
记录，
input type : col.data index==' age '？ ' number' : 'text '，
数据索引： col .数据索引、
title: col.title，
editing : this.is editing (record )
() )
(；
)；
this.doColums(Columns )；
return (
)；
}
}
consteditableformtable=form.create () ) (cdyc )；
export default EditableFormTable；
具体来说，我还是觉得官方网站是主要的。
antd官方网站地址： https://ant.design/components/table-cn/# components-table-demo-edit-row