Reactjs 如何在typescript中对react引导表元素调用方法？

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

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

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

clearSelectedRow() {

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

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

}

clearSelectedRow（）{
var table=ReactDOM.findDOMNode（this.refs.bootstrapTableRef）；
table.cleanSelected（）；
var tableRef2=document.getElementById（“searchResultsTable”）；
tableRef2.cleanSelected（）；
}

试试：

const table:any=this.refs.bootstrapTable；
table.cleanSelected（）；

主要问题是DOM对象和TSX类之间的上下文不同，因此没有在React引导表中调用该方法。所以关键部分是顶部的“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>);

导出类SearchResultsTable2扩展了React.PureComponent{
bootstrapTableRef：任何；
建造师（道具）{
超级（道具）；
this.onBootstrapTableRef=this.onBootstrapTableRef.bind（this）；
clearSelectedRow（）{
this.bootstrapTableRef.cleanSelected（）；
}
onBootstrapTableRef（实例）{
this.bootstrapTableRef=实例；
}
componentDidUpdate（）{
这个.clearSelectedRow（）；
}
公共渲染（）{
...
返回(
....);

我作为Azulbonent实现了它，但更改了对ref的访问：

this.bootstrapTableRef.selectionContext.selected = [];

---

谢谢！原来我需要一点关于“这个”的知识在Javascript中，这是一种令人沮丧的语言！嗨，欢迎Paulo！谢谢你的回答！虽然你发布的代码似乎解决了手头的问题，但如果你能详细说明这个解决方案是如何工作的，那就太好了。这将使它更适用于将来遇到类似问题的其他人。事实上，我将尝试在未来，谢谢。

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

this.bootstrapTableRef.selectionContext.selected = [];