react中获取选中行的数据

用selectedRows获取选中行的数据

在选中多选框时添加onChange方法存储selectedRows，在界面提交时直接获取selectedRows即可。

   //创建一个orderData对象，获取到选中行的所有数据后，赋值给orderData对象中的items属性
    let orderData = Object.assign({}, this.state.manualOrder, {
      items: this.state.selectedRows
    })

下面代码是整个jsx文件

import React, { Component } from 'react'
import { Table, Button, Row, Col, Divider, Select } from 'antd'
import PagenHeader from '../../components/PagenHeader'
import UploadPO from './UploadPO'
import classes from './ManualOrder.module.css'
import { getLocalStorage } from '../../utils/storage'
import { submitOrder } from '../../api/order'
import PageResult from '../../components/PageResult'
import BillShipForm from './BillShipForm'
import { getbillShip } from '../../api/bill_ship'

export default class ManualOrder extends Component {

  state = {
    manualOrder: {},
    poDataList: [],
    printType: null,
    isBillFormVisible: false,
    printTypeList: ['SB'],
    billShipInfo: {},
    showBillButton: false,
    selectedRowKeys: [],
    submiting: false,
    submitSuccessfully: false,
    uploadSuccessfully: false,
    disableSelected: false,
    pageResult: {
      statusCode: 0,
      message: null
    },
    successMsg: '',
    errorMsg: ''
  }

  parsePOData = (data) => {
    const poDataList = [];
    data.items.forEach(item => poDataList.push(item));
    this.setState({ manualOrder: data, poDataList: poDataList });
  };

  onUploadSuccessfully = (flag) => {
    this.setState({ uploadSuccessfully: flag })
  }

  handleSubmit = () => {
    this.setState({ submiting: true, disableSelected: true });

    const data = this.constructorManualOrder(this.state.manualOrder);
    submitOrder(data).then(res => {
      if (res.code === 4) {
        const resultMessage = 'Ordering completed. A notification mail have been send to you. If you cannot receive the notice mail within 2 hours,please contact our support team.'
        const pageResult = { statusCode: 0, message: resultMessage }
        this.parsePOData(res.data)
        this.setState({ submiting: false, disableSelected: false, submitSuccessfully: true, manualOrder: res.data, pageResult: pageResult });

      } else {
        const resultMessage = `Error submitting the order: ${res.message || res.msg}`
        const pageResult = { statusCode: 1, message: resultMessage }
        this.setState({ submiting: false, disableSelected: false, submitSuccessfully: false, pageResult: pageResult });
      }
    }, err => {
      const resultMessage = 'Error submitting the order:' + err + ". Please contact Avery Dennison Software Support Team software.support@ap.averydennison.com"
      const pageResult = { statusCode: 1, message: resultMessage }
      this.setState({ submiting: false, disableSelected: false, submitSuccessfully: false, pageResult: pageResult });
    })

  }
  handleDirectorCreateOrder = () => {
    window.location.href = '/kaloud/order/manualOrder'
  }
  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({selectedRowKeys:selectedRowKeys,selectedRows:selectedRows})
  };

  getBillShipInfo = () => {
    getbillShip().then(res => {
      if (res.code === 4) {
        const billData = res.data.billTo || {}
        const shipData = res.data.shipTo || {}
        const billShipInfo = {
          printLocation: null,
          billContact: billData.contact,
          billConpanyName: billData.companyName,
          billAddress1: billData.address1,
          billAddress2: billData.address2,
          billAddress3: billData.address3,
          billAddress4: billData.address4,
          billCity: billData.city,
          billState: billData.state,
          billZip: billData.zip,
          billCountry: billData.country,
          billPhone: billData.phone,
          billFax: billData.fax,
          shipContact: shipData.contact,
          shipCompanyName: shipData.companyName,
          shipAddress1: shipData.address1,
          shipAddress2: shipData.address2,
          shipAddress3: shipData.address3,
          shipAddress4: shipData.address4,
          shipCity: shipData.city,
          shipState: shipData.state,
          shipZip: shipData.zip,
          shipCountry: shipData.country,
          shipPhone: shipData.phone,
          shipFax: shipData.fax,
          shipVia: shipData.via
        }
        this.setState({ billShipInfo: billShipInfo })
      }
    }, err => {
      console.log(err)
    })
  }

  handlePrintTypeChange = (value) => {
    if (value === 'SB') {
      this.setState({ showBillButton: true })
    } else {
      this.setState({ showBillButton: false })
    }
    this.setState({ printType: value })
  }

  handleShowBillShip = () => {
    this.setState({ isBillFormVisible: true })
  }

  handleCloseForm = () => {
    this.setState({ isBillFormVisible: false })
  }

  onBillShipChange = (billShipFormData) => {
    this.setState({ billShipInfo: billShipFormData })
  }

  onUploadPORef = (ref) => {
    this.child = ref
  };

  constructorManualOrder = (manualOrder) => {
    //创建一个orderData对象，获取到选中行的所有数据后，赋值给orderData对象中的items属性
    let orderData = Object.assign({}, this.state.manualOrder, {
      items: this.state.selectedRows
    })

    const result = orderData;
    result.billShip = {
      billTo: this.state.billShipInfo.billTo,
      shipTo: this.state.billShipInfo.shipTo
    }
    result.printType = this.state.printType
    result.printLocation = this.state.billShipInfo.printLocation
    result.user = manualOrder.user === null ? getLocalStorage('user') : manualOrder.user
    this.setState({ manualOrder: result })
    return result;
  }
  goBack = () =>{
    this.setState({manualOrder: {},
      poDataList: [],
      isBillFormVisible: false,
      showBillButton: false,
      selectedRowKeys: [],
      submiting: false,
      submitSuccessfully: false,
      uploadSuccessfully: false,
      disableSelected: false,
      pageResult: {
        statusCode: 0,
        message: null
      },
      successMsg: '',
      errorMsg: ''})
  }
  renderColumns = () => {
    return [
      {
        title: 'Message',
        dataIndex: 'validateMsg',
        render: text => {
          if (text === 'Ready' || text === 'Success') {
            return <span>{text}</span>
          } else {
            return <span className="ant-typography ant-typography-danger" direction="ltr">{text}</span>
          }
        }
      },
      {
        title: 'Line No',
        dataIndex: 'rowNo'
      },
      {
        title: 'Factory Code',
        dataIndex: 'factoryCode'
      },
      {
        title: 'Quantity',
        dataIndex: 'orderQty'
      }
    ];
  }

  render() {
    //const user = getLocalStorage('user');
    const  result =new URLSearchParams(this.props.location.search)
    const user = result.get('user');
    const { manualOrder, poDataList, billShipInfo, isBillFormVisible, printTypeList ,disableSelected,selectedRowKeys
      ,uploadSuccessfully,showBillButton,submitSuccessfully,submiting, pageResult} = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      getCheckboxProps: (record) => ({
        disabled: record.validateMsg !== 'Ready' || disableSelected
      })
    };
    return (
        <div>
          <PagenHeader titleClass={classes.title}> Manual Order Form (User: {user})</PagenHeader>
          {
            (uploadSuccessfully === false) &&
            <UploadPO parsePOData={this.parsePOData} onUploadPORef={this.onUploadPORef} onUploadSuccessfully={this.onUploadSuccessfully} />
          }
          {
            (uploadSuccessfully === true) &&
            <div>
              <Row justify="center">
                <Col span={2} className={classes.label}>Select Print Type </Col>
                <Col span={3} className={classes.item}>
                  <Select
                      className={classes.item_width}
                      onChange={this.handlePrintTypeChange}
                      placeholder={' '}>
                    {printTypeList.map(printType => (
                        <Select.Option key={printType} >{printType}</Select.Option>
                    ))}
                  </Select>
                </Col>
                {showBillButton &&
                <Col span={2} >
                  <Button onClick={this.handleShowBillShip}>Bill Ship</Button>
                </Col>
                }
                <Col>
                  <BillShipForm isVisible={isBillFormVisible}
                                billShipInfo={billShipInfo}
                                closeForm={this.handleCloseForm} onBillShipChange={this.onBillShipChange} />
                </Col>
              </Row>
              <Divider orientation="left"></Divider>
              <Table
                  rowSelection={rowSelection}
                  pagination={false}
                  columns={this.renderColumns()}
                  dataSource={poDataList}
                  disabled={this.state.submitSuccessfully}
                  rowKey={record => record.rowNo}
              />
              <PageResult result={pageResult} titleClass={pageResult.statusCode === 0 ? classes.success_msg : classes.error_msg}>{pageResult.message}</PageResult>
              <Row justify="center" className={classes.submit}>
               { <Col span={2} >
                  <Button onClick={this.goBack} size="large" style={{ display: (submitSuccessfully ? 'none' : 'block') }}>Back</Button>
                </Col>}
                <Col offset={1} span={2} >
                  <Button type="primary" style={{ display: (submitSuccessfully ? 'none' : 'block') }}
                          size="large"
                          block
                          disabled={selectedRowKeys.length <= 0 || submiting}
                          onClick={this.handleSubmit}>
                    {submiting ? 'Submiting' : 'Submit'}
                  </Button>
                  <Button type="primary"
                          size="large"
                          block
                          onClick={this.handleDirectorCreateOrder} style={{ display: submitSuccessfully ? 'block' : 'none' }}>
                    New Order
                  </Button>
                </Col>
              </Row>
            </div>
          }
        </div>
    )
  }
}