Question

我正在使用react-rails gem，我的代码具有以下结构。我在从函数内部生成的按钮调用onClick时遇到困难。

class AdminRevenueShareModelsSearch extends AlacrityTable {

    constructor(props) {
        super(props);   
        this.handleDelete = this.handleDelete.bind(this); 

        this.columns = [
            { path: "id", title: "ID", sort: true, isKey: true},
            { path: "name", title: "Name" },
            { path: "description", title: "Description"},
            { path: "", title: "Actions" , dataFormat: this.tableActions }

        ];
    }

   handleDelete(){
      console.log("assasa");
    }

    tableActions(cell, row, extra, index) {
      return (
        <Button
          bsStyle="default"
          onClick={this.handleDelete}
          title="Delete">
          <Glyphicon title="Delete" glyph="trash" />
        </Button>
      );
    }



render() {
    return (
      <div>
        <BootstrapTable data={ this.props.data }
                        remote={ true }
                        striped={true}
                        hover={true}
                        height={ 'auto' }
                        pagination={ true }
                        fetchInfo={ { dataTotalSize: this.props.totalDataSize } }
                        options={ {
                            sizePerPage: this.props.sizePerPage,
                            withFirstAndLast: false,
                            sizePerPageList: [ 5, 10, 20 ],
                            page: this.props.currentPage,
                            onPageChange: this.props.onPageChange,
                            onSortChange: this.props.onSortChange,
                            onFilterChange: this.props.onFilterChange,
                            noDataText: this.noDataText()
                        } }>
            {this.renderTableColumns()}
        </BootstrapTable>
      </div>
    );
}

我以前使用过onClick={this.handleDelete()}，但收到错误消息“ this.handleDelete不是函数”。

Answer 1

如下所示的调用函数。

 onClick={ () => this.handleDelete()}

还将您的tableActions更改为箭头功能。

tableActions = (cell, row, extra, index) => {
  return (
    <Button
      bsStyle="default"
      onClick={this.handleDelete}
      title="Delete">
      <Glyphicon title="Delete" glyph="trash" />
    </Button>
  );
}

Answer 2

我想上下文在某处丢失了（不确定，因为您还没有提供render函数）。尝试使tableActions函数具有箭头功能：

 tableActions = (cell, row, extra, index) => {

如果这样做没有帮助，请提供渲染功能

Answer 3

应该是

  onClick={this.handleDelete}

但不是

  onClick={this.handleDelete()}

如果要将参数传递给函数，则需要（），如下所示

  onClick={e => this.handleDelete(e)}

从函数内部调用onClick

3 个答案: