1

I think the problem I'm having is casting the "any" bootstrapTableRef to the react-bootstrap-table, setting up the ref, or am importing wrong. I cannot figure out how to enable access to the method of the imported table. I saw this for HTMLInputElement but cannot get it to work for type bootstrapTable. Specifically this is the method I want to call:

this.refs.table.cleanSelected();  // this.refs.table is a ref for BootstrapTable

In ResultsTables.tsx i'm referencing this way

import Select from "react-select";
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; //
import "../../../node_modules/react-bootstrap-table/css/react-bootstrap-table.css";
import { Link } from "react-router";
import * as ReactDOM from 'react-dom';

then below 

export class ResultsTable extends React.Component<IResultsTableProps, 
    IResultsTableState>{
    bootstrapTableRef: any;

...

public render() {
           ...

            return (
                 <BootstrapTable data={this.props.lots} keyField="lotNumber" striped
                        condensed={true} id="searchResultsTable" selectRow={selectRow} hover ref={(i) => this.bootstrapTableRef = i} ...>
                   ...
                 </BootstrapTable> );

I want to be able to do this but get an error that the method does not exist on type ReactInstance/Element. I tried different ways of casting but can't get the casting type to be recognized either.

clear() {
   this.refs.bootstrapTableRef.cleanSelected();
}

I have tried to access these two ways as well without success:

clearSelectedRow() {

    var table = ReactDOM.findDOMNode<BootstrapTable>(this.refs.bootstrapTableRef);
    table.cleanSelected();

    var tableRef2 = <BootstrapTable>document.getElementById("searchResultsTable");
    tableRef2.cleanSelected();

}
azulBonnet
  • 831
  • 4
  • 14
  • 31

3 Answers3

1

The primary problem turned out to be that the context of this was different between the DOM object and the TSX class so that the method was not being called in the React-Bootstrap-Table. So the key part was the "this" binding at the top.

export class SearchResultsTable2 extends React.PureComponent<foo,bar>{
   bootstrapTableRef: any;
   constructor(props) {
      super(props);
      this.onBootstrapTableRef = this.onBootstrapTableRef.bind(this);

    clearSelectedRow() {
       this.bootstrapTableRef.cleanSelected();
    }

    onBootstrapTableRef(instance) {
       this.bootstrapTableRef = instance;
    }

    componentDidUpdate() {
        this.clearSelectedRow();
    }

    public render() {

       ...
        return (
                <BootstrapTable data={this.props.lots} keyField="lotNumber" striped
                    condensed={true} id="searchResultsTable" selectRow={selectRow} hover ref={this.onBootstrapTableRef} options={{ noDataText: 'No lots to display.' }}>....</BootstrapTable>);
azulBonnet
  • 831
  • 4
  • 14
  • 31
0

Try:

<BootstrapTable ref="bootstrapTable" />
const table: any = this.refs.bootstrapTable;
table.cleanSelected();
Paulo Costa
  • 1
  • 1
  • Thank you! Turns out I needed a little lesson on the context of "this" in Javascript, is a frustrating language! – azulBonnet Aug 23 '17 at 03:48
  • Hi and welcome Paulo! Thanks for this answer! While the code you posted seems to solve the problem at hand, it would be nice if you could elaborate how this solution works. This would make it more usable for other people encountering similar problems in the future. – jotasi Aug 23 '17 at 08:11
  • Indeed, I will try to be more clear on the future. Thanks. – Paulo Costa Aug 26 '17 at 06:42
0

I've achieved it as azulBonnet but changing the access to the ref:

this.bootstrapTableRef.selectionContext.selected = [];
kilofafeure2
  • 11
  • 1