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

我正在学习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

从“React”导入React
从“antd”导入{表、输入、按钮、图标}
从“客户端/网络”导入网络
导入“antd/dist/antd.css”
进口{
内容,，
斯帕内尔，
表模式，
描述，
表B，
领域
添加
}来自“./styled components”
从“./Header”导入标题页
常量列=[
{
标题：“姓名”，
数据索引：“名称”，
},
{
标题：“电子邮件ID”，
dataIndex:'emailId'，
},
{
标题：“域ID”，
dataIndex:'domainId'，
},
{
标题：“类型”，
数据索引：“类型”，
},
{
标题：“报告经理”，
dataIndex:“reportingManager”，
},
{
标题:"圆圈",，
dataIndex:'圆圈'，
}
]
类userManagement扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
选定的箭头键：[]，
用户：[]
}
this.handleClick=this.handleClick.bind（this）
}
componentDidMount（）{
常量数据=[]
网络
.getUserList（）
。然后（（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:'-'
数据推送({
名称：`${it.firstName}${it.lastName}`，
emailId:it.email，
域名：it.email，
类型，
报告经理，
圈子
})
})
this.setState（{users:data}）
})
.catch（（错误）=>{
console.log（'res'，err）
})
}
onSelectChange=selectedRowKeys=>{
this.setState（{selectedRowKeys}）
}
选择行=（记录）=>{
console.log（'select'，record）
const selectedRowKeys=[…this.state.selectedRowKeys]；
if（selectedRowKeys.indexOf（record.key）>=0）{
selectedRowKeys.splice（selectedRowKeys.indexOf（record.key），1）；
}否则{
选择的快捷键。按（录制。键）
}
this.setState（{selectedRowKeys}）
}
onSelectedRowKeysChange=（selectedRowKeys）=>{
selectedRowKeys.map（（it）=>{
console.log（'dd'，this.state.users[it]）
})
this.setState（{selectedRowKeys}）
}
handleClick（）{
常数体={
电子邮件：document.getElementById（'email'）。值，
firstName:document.getElementById（'name'）。值，
lastName:document.getElementById（'name'）。值，
电话：9685963214，
用户名：document.getElementById（'domain'）。值，
reportingManager:document.getElementById（'rm'）。值，
}
网络
.createUser（主体）
。然后（（res）=>{
console.log（'res'，res.data）
})
.catch（（错误）=>{
console.log（'res'，err）
})
}
render（）{
const{selectedRowKeys}=this.state
常量行选择={
选择的箭头键，
onChange:this.onSelectedRowKeysChange，
}
返回(
用户管理
编辑
删除
({
onClick:（）=>{
此选项。选择行（记录）；
},
})}
/>
用户详细信息
名称
电子邮件ID
域ID
类型
报告经理
圈子
+新增
)
}
}
导出默认用户管理

有一个删除表行的命令。

欢迎使用SO！，如果你要求别人修复你的错误，你应该提供一个最小的可生产的例子，这个例子现在似乎被打破了。。。