reactjs - React react-data-table-component 在行按钮中添加事件

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

您没有传递行函数的引用。所以这就是你无法获得值(value)的原因。你这边需要改变两个地方。所以请检查以下内容

地点 1:

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

地方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;