如何在typescript中调用react-bootstrap-table元素的方法？

Question

我认为我遇到的问题是将"any“bootstrapTableRef转换到react-bootstrap表，设置ref，或者导入错误。我不知道如何启用对导入的表的方法的访问。我看到了适用于HTMLInputElement的this，但无法使其适用于bootstrapTable类型。具体来说，this是我想要调用的方法：

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

在ResultsTables.tsx中，我以这种方式引用

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';

然后在下面

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> );

我希望能够做到这一点，但得到一个错误，即该方法在ReactInstance/Element类型上不存在。我尝试了不同的类型转换方法，但也不能让转换类型被识别。

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

我也尝试过这两种方式，但都没有成功：

clearSelectedRow() {

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

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

}

Answer 1

主要问题是DOM对象和TSX类之间的上下文不同，因此在React-Bootstrap-Table中没有调用该方法。所以关键部分是顶部的"this“绑定。

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>);

Answer 2

尝试：

<BootstrapTable ref="bootstrapTable" />
const table: any = this.refs.bootstrapTable;
table.cleanSelected();

Answer 3

我以azulBonnet的身份实现了它，但更改了对引用的访问权限：

this.bootstrapTableRef.selectionContext.selected = [];