React react-data-table-component Add Event in Row按钮

Question

data-table-component和在第一列上添加的按钮，但当我点击按钮时，我无法获得行值。这是我的代码。

import Page from 'components/Page';
import React from 'react';
import {
  Button,
  Card,
  CardBody,
  CardHeader,
  Col,
  FormFeedback,
  FormGroup,
  FormText,
  Input,
  Label,
  Row,
} from 'reactstrap';
import axios from 'axios';
import DataTable , { memoize } from 'react-data-table-component';
import { LoadingOverlay, Loader } from 'react-overlay-loader';
import 'react-overlay-loader/styles.css';
const columns = memoize(clickHandler => [
  {
    cell:() => <button onClick={clickHandler} >Action</button>,
    ignoreRowClick: true,
    allowOverflow: true,
    button: true,
  },
  {
    name: 'ID',
    selector: 'ID',
    sortable: true,
    grow: 2,
  },
  {
    name: 'Name',
    selector: 'name',
    sortable: true,
    grow: 2,
  },
  {
    name: 'Class',
    selector: 'class',
    sortable: true,
  },

]);
const viewQuery ="SELECT ID,name,class FROM school ";
 class DTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            viewdata:{},
            loading:false,
            selectedRows: []

        };
      }
  viewData(){

    axios({
      method: 'post',
      url: '',
      data: {query:viewQuery},
      crossDomain: true,
      headers: {
          'Content-type': 'multipart/form-data'
        }
      })
      .then(response => {
         this.setState({ viewdata: response.data });

         //console.log(response)
        })
      .catch(function (response) {
          //handle error
          console.log(response);
      });
  } 
 componentDidMount() {
       this.viewData();

 }
 handleButtonClick = () => {
    console.log('clicked');
  };
  handleChange = state => {
    console.log('state', state.selectedRows);

    this.setState({ selectedRows: state.selectedRows });
  };
  render(){
  return (
    <Page title="Forms" breadcrumbs={[{ name: 'Forms', active: true }]}>
      <Row>
        <Col xl={7} lg={12} md={12}>
          <Card>
            <CardHeader>Input Types</CardHeader>
            <CardBody>
                <DataTable
                title="Created Form"

                data={this.state.viewdata}
                columns={columns(this.handleButtonClick)}
                onRowSelected={this.handleChange}
                selectableRows
                pagination
                dense
                />
            </CardBody>
          </Card>
        </Col>
      </Row>
    </Page>
  );
}
}
export default DTable;

如何获取点击按钮行的值。在handleButtonClick中，我得到了未定义的值。

嗨，我在这里更新了我的完整代码，我使用了react-data-table-component库，我已经阅读了它的所有文档。但是我无法获得点击的行值。

Answer 1

您没有传递row函数的引用。因此，您无法获得需要更改两个Places.so value.Your端的原因，请检查以下内容

Place 1 :

cell:(row)=><button onClick={clickHandler} id={row.ID}>Action</button>

Place 2:

 handleButtonClick = (state) => {
    console.log('clicked');
    console.log(state.target.id);
  };

尽管如此，如果你不理解任何东西，请检查下面的完整代码。

import Page from 'components/Page';
import React from 'react';
import {
  Button,
  Card,
  CardBody,
  CardHeader,
  Col,
  FormFeedback,
  FormGroup,
  FormText,
  Input,
  Label,
  Row,
} from 'reactstrap';
import axios from 'axios';
import DataTable , { memoize } from 'react-data-table-component';
import { LoadingOverlay, Loader } from 'react-overlay-loader';
import 'react-overlay-loader/styles.css';
const columns = memoize(clickHandler => [
  {
    cell:(row) => <button onClick={clickHandler} id={row.ID}>Action</button>,
    ignoreRowClick: true,
    allowOverflow: true,
    button: true,
  },
  {
    name: 'ID',
    selector: 'ID',
    sortable: true,
    grow: 2,
  },
  {
    name: 'Name',
    selector: 'name',
    sortable: true,
    grow: 2,
  },
  {
    name: 'Class',
    selector: 'class',
    sortable: true,
  },

]);
const viewQuery ="SELECT ID,name,class FROM school ";
 class DTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            viewdata:{},
            loading:false,
            selectedRows: []

        };
      }
  viewData(){

    axios({
      method: 'post',
      url: '',
      data: {query:viewQuery},
      crossDomain: true,
      headers: {
          'Content-type': 'multipart/form-data'
        }
      })
      .then(response => {
         this.setState({ viewdata: response.data });

         //console.log(response)
        })
      .catch(function (response) {
          //handle error
          console.log(response);
      });
  } 
 componentDidMount() {
       this.viewData();

 }
 handleButtonClick = (state) => {
    console.log('clicked');
    console.log(state.target.id);
  };
  handleChange = state => {
    console.log('state', state.selectedRows);

    this.setState({ selectedRows: state.selectedRows });
  };
  render(){
  return (
    <Page title="Forms" breadcrumbs={[{ name: 'Forms', active: true }]}>
      <Row>
        <Col xl={7} lg={12} md={12}>
          <Card>
            <CardHeader>Input Types</CardHeader>
            <CardBody>
                <DataTable
                title="Created Form"

                data={this.state.viewdata}
                columns={columns(this.handleButtonClick)}
                onRowSelected={this.handleChange}
                selectableRows
                pagination
                dense
                />
            </CardBody>
          </Card>
        </Col>
      </Row>
    </Page>
  );
}
}
export default DTable;

Answer 2

{/*start*/}{
  name: "Contact Number",
  selector: "phone",
  //   selector: (row: { createdAt: any; })=> row.createdAt,
  sortable: true,
},
{
  name: "Gender",
  selector: "gender",
  //   selector: (row: { createdAt: any; })=> row.createdAt,
  sortable: true,
},
{
    name:"Action",
  cell: (row: { _id: any }) => (
      <>
    <span onClick={() => handleButtonClick(row._id)} className='btn btn-primary'><Pencil/></span>{'     '}
    <span onClick={() => handleButtonClick(row._id)} className='btn btn-danger'><Trash/></span>
    </>
  ),
  
  ignoreRowClick: true,
  allowOverflow: true,
  button: true,
},{/*end*/}