如何更新和刪除 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

有一個更新和刪除表行的官方示例。