1

我认为我遇到的问题是将“任何” bootstrapTableRef 投射到 react-bootstrap-table、设置 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> );

我希望能够做到这一点，但得到一个错误，即该方法在类型 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();

}
4

3 回答 3

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>);
于 2017-08-23T14:47:38.043 回答
0

尝试：

<BootstrapTable ref="bootstrapTable" />
const table: any = this.refs.bootstrapTable;
table.cleanSelected();
于 2017-08-23T02:28:56.383 回答
0

我已将其作为 azulBonnet 实现，但更改了对 ref 的访问：

this.bootstrapTableRef.selectionContext.selected = [];
于 2020-08-20T08:53:11.327 回答