react datatable中的按钮onClick事件不起作用

时间:2019-11-22 07:04:18

标签: reactjs react-redux react-data-components

我编写了一个渲染函数,并在数据表的每一行中提供了用于编辑和删除的按钮。 onclick事件正在使用react redux操作方法。但是当我单击“编辑/删除”按钮时, “无法读取未定义的属性'props'”错误

import { DataTable } from 'react-data-components';
    <DataTable
      keys="title"
       columns={[
       { title: 'Report Name', prop: 'title'},
       { title: 'Author', prop: 'username'},
       { title: 'date Created', prop: 'datecreated'},
       { title: 'Date Modified', prop: 'datelastmodified'},
       {title:'Actions', render:function(val, row) {
          return React.createElement( "div", null,
           React.createElement( "button", {className:"btn", onClick:(e)=>this.props.EditReport(row.reportid)}, 'Edit'),
           React.createElement( "button", {className:"btn", onClick:(e)=>this.props.DeleteReport(row.reportid)}, 'Delete')
       )
     }
     }
  ]}
  initialData={this.props.savedReportList.data}
  initialPageLength={5}
 />

const mapDispatchToProps = (dispatch) => {
  return {
      EditReport: (reportID) => dispatch(EditReport(reportID)),
      DeleteReport: (reportID) => dispatch(DeleteReport(reportID))
  }
}

1 个答案:

答案 0 :(得分:0)

之所以发生这种情况,是因为您使用this超出范围。您想达到什么目的?我们可以从那里拿走。