如何让 'ref' 为 ReactTabulator 工作

Question

我正在使用 react-tabulator 模块将 Tabulator 与 React 结合使用。

我正在尝试将 ref 用于 table 组件并将其用于其他操作，例如下载数据或其他任何操作。

FetchWorkloads.jsx

import React, { useState, useEffect, Suspense } from 'react';
import PropTypes from 'prop-types';

import "react-tabulator/lib/styles.css"; // default theme
import "react-tabulator/css/tabulator_midnight.min.css";

import {Button } from 'react-bootstrap';
import { ReactTabulator, reactFormatter } from "react-tabulator";

const luxon = require('luxon');
window.DateTime = luxon.DateTime; 

const FetchWorkloads = (props) => {
    // Possible Task Status Options (for display purpose)
    const taskStatusOptions = [{id: "N", label: "New"}, {id: "P", label: "In Progress"}, {id: "C", label: "Completed"}];

    // Variable to hold the workloads data
    const [workloadData, setWorkloadData] = useState([]);

    const workloadsTableRef = React.createRef();

    // Action to download workloads data as 'JSON'
    const downloadAsJSON = () => {
        workloadsTableRef.current.table.download("json", "RTP_Workloads.json")
    }

    // Action to download workloads data as 'CSV'
    const downloadAsCSV = () =>  {
       // action
    }

    // Action to download workloads data as 'PDF'
    const downloadAsPDF = () =>  {
       // action
    }
    
    // Fetch the workloads from DB
    const getWorkloadData = async() => {
        // API Call
    }

    // Workload Table Column Setup
    const workloadsTableCoumns = [
        // column setup
    ];

    // Workload Table Options Setup
    const workloadsTableOptions = {
            index:"id",
            layout:"fitColumns",
            pagination: true,
            paginationSize: 20,
            placeholder:"No Workload Available",
    };

    // useEffect call the actions inside it after rendering
    useEffect(() => {
        getWorkloadData();
    },[]);

    return (
        <>
            <h3 className="text-center"> Radiotherapy Physics Workloads </h3>
            <div>
                <Button variant="dark" onClick={() => downloadAsJSON()}>Download JSON</Button>{' '}
                <Button variant="dark" onClick={() => downloadAsCSV()}>Download CSV</Button>{' '}
                <Button variant="dark" onClick={() => downloadAsPDF()}>Download PDF</Button>
            </div>
            <div style={{clear: 'both'}}></div>
            <br></br>
            <Suspense fallback={<p>Fetching workloads...</p>}>
                <ReactTabulator
                    ref={workloadsTableRef}
                    columns={workloadsTableCoumns} 
                    data={workloadData} 
                    options={workloadsTableOptions}
                />
            </Suspense>
            
        </>
        
    );
}

FetchWorkloads.propTypes = {
    api: PropTypes.object.isRequired
};

export default FetchWorkloads;

我的问题：

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `FetchWorkloads`.

我相信如果它 class 会更容易，但我需要它作为一个功能组件。

我想我遗漏了一些基本的东西，但由于我是 React 的新手，所以无法理解为什么。

如何让这个 ref 工作？

谢谢

Answer 1

@DoubleH的回答：

import React, { useState, useEffect, Suspense, useRef } from "react";
import PropTypes from "prop-types";

import "react-tabulator/lib/styles.css"; // default theme
import "react-tabulator/css/tabulator_midnight.min.css";

import { Button } from "react-bootstrap";
import { ReactTabulator } from "react-tabulator";

const luxon = require("luxon");
window.DateTime = luxon.DateTime;

const FetchWorkloads = (props) => {
  // Possible Task Status Options (for display purpose)
  const taskStatusOptions = [
    { id: "N", label: "New" },
    { id: "P", label: "In Progress" },
    { id: "C", label: "Completed" }
  ];

  // Variable to hold the workloads data
  const [workloadData, setWorkloadData] = useState([]);

  let workloadsTableRef = useRef(null);

  // Action to download workloads data as 'JSON'
  const downloadAsJSON = () => {
    workloadsTableRef.current.download("json", "RTP_Workloads.json");
  };

  // Action to download workloads data as 'CSV'
  const downloadAsCSV = () => {
    // action
  };

  // Action to download workloads data as 'PDF'
  const downloadAsPDF = () => {
    // action
  };

  // Fetch the workloads from DB
  const getWorkloadData = async () => {
    // API Call
  };

  // Workload Table Column Setup
  const workloadsTableCoumns = [
    // column setup
  ];

  // Workload Table Options Setup
  const workloadsTableOptions = {
    index: "id",
    layout: "fitColumns",
    pagination: true,
    paginationSize: 20,
    placeholder: "No Workload Available"
  };

  // useEffect call the actions inside it after rendering
  useEffect(() => {
    getWorkloadData();
  }, []);

  return (
    <>
      <h3 className="text-center"> Radiotherapy Physics Workloads </h3>
      <div>
        <Button variant="dark" onClick={() => downloadAsJSON()}>
          Download JSON
        </Button>{" "}
        <Button variant="dark" onClick={() => downloadAsCSV()}>
          Download CSV
        </Button>{" "}
        <Button variant="dark" onClick={() => downloadAsPDF()}>
          Download PDF
        </Button>
      </div>
      <div style={{ clear: "both" }}></div>
      <br></br>
      <Suspense fallback={<p>Fetching workloads...</p>}>
        <ReactTabulator
          onRef={(r) => (workloadsTableRef = r)}
          columns={workloadsTableCoumns}
          data={workloadData}
          options={workloadsTableOptions}
        />
      </Suspense>
    </>
  );
};

FetchWorkloads.propTypes = {
  api: PropTypes.object
};

export default FetchWorkloads;

ref 作业已更正。

如何让 'ref' 为 ReactTabulator 工作

How to make 'ref' work for ReactTabulator

reactjs

tabulator

react-hooks