在班级下一个使用React Bootstrap表

时间:2019-08-22 07:48:12

标签: reactjs react-bootstrap-table

也许这是一个很奇怪的问题,但是对于新手来说很糟糕。

我正在上课的下一个使用react-bootstrap表,以及如何使用该功能。

让我告诉你一些代码。

这是我的班级=>

export default class TimeDetailByDate extends React.Component{   
      constructor(props){
        super(props);           

        this.state = {
              timesheets : [], 
...
//use this table in render
 <BootstrapTable keyField={"id"} data={this.state.timesheetstemp} columns={columns}>


                  </BootstrapTable>

这是列(类之外)

const columns = [  
  {
    dataField: 'tdate',
    text: 'Date',    
    classes : 'p-1',
    formatter : GetDateFormat,
    headerStyle : {
      width:'120px'
    },
    sort : true
  },
  {...... 

columnformatter之一中,我使用了此函数(在类外部)=>

function GetActionFormat(cell,row){
  return(<div>
    <button type="button" className="btn btn-outline-primary btn-sm ts-buttom" size="sm" onClick={this.handleModelEdit(row)}>Edit</button>
    <button type="button" className="btn btn-outline-danger btn-sm ml-2 ts-buttom" size="sm">Delete</button>
    </div>
  )
}

问题出在这里,这个handleModelEdit在类内部,并且当这样的调用发生错误

  

TypeError:this.handleModelEdit不是函数

此函数需要来自类构造函数字段的一些数据。那么我该如何使用呢?

希望您能理解我的问题,请提供帮助。

1 个答案:

答案 0 :(得分:0)

我不确定问题是否正确,但是在我看来,您尚未在构造函数中绑定handleModelEdit函数。试试这个:

  constructor(props) {
    super(props);

    ...

    this.handleModelEdit = this.handleModelEdit.bind(this);
  }