如何更新和删除 antd 表中的选定行?

Question

我正在学习 reactjs 并卡在 antd 表中，我想选择一些我必须在表上修改或删除的行。我怎样才能更有效地做到这一点？我在这里附加代码。我是编码新手，这是第一个项目。如果有人能帮助我，非常感谢。

import React from 'react'
import { Table, Input, Button, Icon } from 'antd'
import network from 'client/network'
import 'antd/dist/antd.css'
import {
Content,
DetailsPanel,
TableSchema,
Descrip,
TableB,
Field,
Add,
} from './styled-components'
import HeaderPage from './Header'

const columns = [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Email ID',
dataIndex: 'emailId',
},
{
title: 'Domain ID',
dataIndex: 'domainId',
},
{
title: 'Type',
dataIndex: 'type',
},
{
title: 'Reporting Manager',
dataIndex: 'reportingManager',
},
{
title: 'Circles',
dataIndex: 'circles',
}
]
class userManagement extends React.Component {
constructor(props) {
super(props)
this.state = {
selectedRowKeys: [],
users:[]
}
this.handleClick = this.handleClick.bind(this)
}
componentDidMount() {
const data = []
network
.getUserList()
.then((res) => {
console.log('res', res.data)
res.data.map((it) => {
const type = it.admin ? 'Admin' : 'Viewer'
const circles = it.authInfo ? it.authInfo.values[0] : '-'
const reportingManager = it.reportingManager ? it.reportingManager : '-'
data.push({
name: `${it.firstName} ${it.lastName}`,
emailId: it.email,
domainId: it.email,
type,
reportingManager,
circles
})
})
this.setState({ users: data })
})
.catch((err) => {
console.log('res', err)
})
}
onSelectChange = selectedRowKeys => {
this.setState({ selectedRowKeys })
}
selectRow = (record) => {
console.log('select', record)
const selectedRowKeys = [...this.state.selectedRowKeys];
if (selectedRowKeys.indexOf(record.key) >= 0) {
selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1);
} else {
selectedRowKeys.push(record.key)
}
this.setState({ selectedRowKeys })
}
onSelectedRowKeysChange = (selectedRowKeys) => {
selectedRowKeys.map((it) => {
console.log('dd', this.state.users[it])
})
this.setState({ selectedRowKeys })
}
handleClick() {
const body = {
email: document.getElementById('email').value,
firstName: document.getElementById('name').value,
lastName: document.getElementById('name').value,
phone: '9685963214',
userName: document.getElementById('domain').value,
reportingManager: document.getElementById('rm').value,
}
network
.createUser(body)
.then((res) => {
console.log('res', res.data)
})
.catch((err) => {
console.log('res', err)
})
}
render() {
const { selectedRowKeys } = this.state
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectedRowKeysChange,
}
return (
<div style={{ width: '100%', height: '100%' }}>
<div
style={{ width: '100%', height: '65px', postion: 'fixed', top: 0 }}
>
<HeaderPage
defKey="1"
/>
</div>
<div style={{ overflow: 'overlay', height: '100%', backgroundColor: '#F0F2F5'}}>
<Content>
<TableSchema>
<Descrip>
<div style={{ float: 'left', fontWeight: '630', fontSize: '16px'}}>
USER MANAGEMENT
</div>
<div style={{ marginLeft:'1080px', color:'#BFBFBF'}}><Icon type="edit" />  Edit</div>
<div style={{ marginLeft:'24px', color:'#BFBFBF'}}><Icon type="delete" />  Delete</div>
</Descrip>
<TableB >
<Table
rowSelection={rowSelection}
columns={columns}
dataSource={this.state.users}
onRow={record => ({
onClick: () => {
this.selectRow(record);
},
})}
/>
</TableB>
</TableSchema>
<DetailsPanel>
<div style={{ borderBottom: '2px solid #F0F2F5', paddingBottom: '16px'}}>
USER DETAILS
</div>
<div>
<Field>Name</Field>
<Input placeholder="Specify User Name" id="name" />
</div>
<div>
<Field>Email ID</Field>
<Input placeholder="Specify Email ID" id="email" />
</div>
<div>
<Field>Domain ID</Field>
<Input placeholder="Specify Domain ID" id="domain"/>
</div>
<div>
<Field>Type</Field>
<Input placeholder="Specify Type" id="type" />
</div>
<div>
<Field>Reporting Manager</Field>
<Input placeholder="Specify Reporting Manager" id="rm" />
</div>
<div>
<Field>Circles</Field>
<Input placeholder="Specify Circle" id="circles" />
</div>
<Add>
<Button type="primary" onClick={this.handleClick}>+ Add New</Button>
</Add>
</DetailsPanel>
</Content>
</div>
</div>
)
}
}
export default userManagement

Answer 1

有一个更新和删除表行的官方示例。