如何使用react-copy-to-clipboard将表中的行和列复制到剪贴板中？

Question

• 如何在react中复制行和表内容？我正在使用antd库，但是当我复制表的行和内容并使用react-copy-粘贴到剪贴板时，当前表数据存储在json this.state.datasource中，但是当我复制时，我只是得到[object Object]，[object Object]代替实际的行和列数据，有人可以帮忙吗！

---

/*eslint-disable */
import React, { Component } from 'react'
import { Table, Input, Button, Popconfirm, Form } from 'antd'
import { Helmet } from 'react-helmet'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { Menu, Icon } from 'antd';

import {CopyToClipboard} from 'react-copy-to-clipboard';

import styles from './style.module.scss'
const EditableContext = React.createContext();

const EditableRow = ({ form, index, ...props }) => (
  <EditableContext.Provider value={form}>
    <tr {...props} />
  </EditableContext.Provider>
);
const { SubMenu } = Menu;

const EditableFormRow = Form.create()(EditableRow);

class EditableCell extends React.Component {
  state = {
    editing: false,
    copied: false,
  };


  onCopy() {
    console.log("copied");
    alert('copied to clipboard');
  }


  renderCell = form => {
    this.form = form;
    const { children, dataIndex, record, title } = this.props;
    const { editing } = this.state;
    return editing ? (
      <Form.Item style={{ margin: 0 }}>
        {form.getFieldDecorator(dataIndex, {
          rules: [
            {
              required: true,
              message: `${title} is required.`,
            },
          ],

    );
  };

  render() {
    const {
      editable,
      dataIndex,
      title,
      record,
      index,
      handleSave,
      children,
      ...restProps
    } = this.props;
    return (
      <td {...restProps}>
        {editable ? (
          <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
        ) : (
          children
        )}
      </td>
    );
  }
}
class Campaign extends React.Component {
  constructor(props) {
    super(props);
    this.columns = [
      {
        title: 'id',
        dataIndex: 'id',

      },
      {
        title: 'Campaign Name',
        dataIndex: 'name',
        editable: true,
      },
      {
        title: 'Banners',
        dataIndex: 'address',
        editable: true,
      },
      {
        title: 'Video',
        dataIndex: 'Video',
        editable: true,
      },
      {
        title: 'Target',
        dataIndex: 'Target',
        editable: true,
      },
      {
        title: 'Exchanges',
        dataIndex: 'Exchanges',
        editable: true,
      },
      {
        title: 'Status',
        dataIndex: 'Status',
        editable: true,
      },
      {
        title: 'Delete',
        dataIndex: 'Banners',
        render: (text, record) =>
          this.state.dataSource.length >= 1 ? (
            <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
              <a style={{color:'blue'}} href="javascript:;">Delete</a>
            </Popconfirm>
          ) : null,
      },
    ];

    this.state = { //table data i want to copy
      dataSource: [
        {
          key: '0',
          name: 'Kates Campaign',
         id: '32',
          Video: 'London, Park Lane no. 0',
          Target: 'bacon',
          Exchanges: 'Eggs',
        },
        {
          key: '1',
          name: 'Fyber Tests',
          id: '32',
          address: 'Sample Banner Ad (ID 6 ECPM 20.0) ',
        },
      ],
      count: 2,
    };
  }





  render() {
    const { dataSource } = this.state;
    const components = {
      body: {
        row: EditableFormRow,
        cell: EditableCell,
      },
    };
    const columns = this.columns.map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          editable: col.editable,
          dataIndex: col.dataIndex,
          title: col.title,
          handleSave: this.handleSave,
        }),
      };
    });
    return (
      <div>
        <br></br>
        <h1> Campaigns </h1>
        <br></br><br></br>
        <Menu
        className={styles.menu}
        onClick={this.handleClick}
        style={{  marginleft: 80}}
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"

      >
        <SubMenu className={styles.sub}
          key="sub4"
          title={
            <span>
              <Icon type="setting"style={{
  color: '#8c54ff'}} />
              <span className={styles.title}>Options</span>
            </span>
          }
        >
        <span className={styles.icon}>  <Icon type="arrow-down" style={{
  color: '#8c54ff'}} /></span>
          <Menu.Item key="9"> CSV</Menu.Item>

          <span className={styles.icon}><Icon type="sync" style={{
  color: '#8c54ff'}}/> </span>
          <Menu.Item key="11"> Sync</Menu.Item>
          <span className={styles.icon}>

              <Icon
                type="copy"
                style={{
                  color: '#8c54ff',
                }}
              />
            </span>// this is function to copy table data
          <CopyToClipboard text={dataSource} onCopy={() => this.setState({copied: true})}>
       </SubMenu>
      </Menu>

      <br></br>


    );
  }
}
export default Campaign