使用 react-bootstrap-table-2 导出 CSV

Question

我正在尝试从 TookkilProvider 之外的其他组件触发我的 exportCSV...这可能吗？我确实看到了一些对 this.refs.table.handleExportCSV(); here 的引用，但我似乎找不到那个函数

我的代码如下：

<ToolkitProvider
    keyField="id"
    data={[...data]}
    columns={Columns}
    exportCSV={{ onlyExportFiltered: true, exportAll: false }}
    search
>
    {
        props => (
            <div>
                <MyExportCSV {...props.csvProps} />
                <hr />
                <BootstrapTable keyField='id'
                    {...props.baseProps}
                    pagination={paginationFactory(options)} expandRow={expandRow}
                    ref={n => node = n} />

            </div>
        )
    }
</ToolkitProvider>

Answer 1

您可以在父组件中使用 useRef，在子组件中使用 forwardRef。使用 hidden input 创建自定义 MyExportCSV 并将父级 ref 传递给它并在单击时调用 onExport()。然后在父级上，您可以创建 button，它将在子输入的点击触发事件 click 上发生。我为你写了例子。 DEmo