Reactjs React React data table组件在行中添加事件按钮

数据表组件和第一列上添加的按钮，但当我单击按钮时，无法获取行值。这是我的密码

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数据表组件库，我已经阅读了它的所有文档。但我无法获得单击的行值

您不能传递行函数的引用。所以这就是你无法获得价值的原因。你方需要改变两个位置。所以请检查以下事项

地点1：

但如果您不理解任何东西，请检查下面的完整代码

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;

---

渲染器在哪里？什么是常量列？您是否使用了.bindthis？Hi更新了我的问题，请检查。可能它不起作用，因为您将函数赋予了对象。。使用onBtnClick={this.handleButtonClick}，在DataTable组件中，您应该在columns数组上运行map，然后返回第一个数组的操作。onBtnClick是作为道具传递给DataTable组件的函数。

 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;