如何在打字稿中的 react-bootstrap-table 元素上调用方法？

Question

我认为我遇到的问题是将 "any" bootstrapTableRef 转换为 react-bootstrap-table，设置 ref，或者我导入错误。我不知道如何启用对导入 table 方法的访问。我看到 for HTMLInputElement but cannot get it to work for type bootstrapTable. Specifically 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

尝试：

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

Answer 2

原来的主要问题是 DOM 对象和 TSX class 之间的上下文不同，因此该方法没有在 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 3

我以 azulBonnet 的身份实现了它，但更改了对 ref 的访问：

this.bootstrapTableRef.selectionContext.selected = [];

如何在打字稿中的 react-bootstrap-table 元素上调用方法？

How to call method on react-bootstrap-table element in typescript?

typescript

reactjs

react-bootstrap

react-bootstrap-table