protable使用 useref 邦定

useref的作用

import React, { useState, useEffect, useMemo, useRef } from 'react';

export default function App(props){
  const [count, setCount] = useState(0);

  const doubleCount = useMemo(() => {
    return 2 * count;
  }, [count]);

  const counterRef = useRef();

  useEffect(() => {
    document.title = `The value is ${count}`;
  }, [count]);
  
  return (
    <>
      <button ref={counterRef} onClick={() => {setCount(count + 1)}}>Count: {count}, double: {doubleCount}</button>
    </>
  );
}

最常用的使用方法，创建一个空对象，将其赋给button的ref属性，这样就可以通过counterRef去访问current。

在table绑定数据

formRef的用法，可以查看formRef封装的函数：

const [filterData, setFilterData] = useState([]);
const ref = useRef();
//table里的用法
<ProTable 
            formRef={ref}
            // dataSource={trendData}
            dataSource={ref?.current?.getFieldValue("startTime").length>0?[...filterData]:[...trendData]}
            columns={tableColumns}
            rowKey='out'
            options={{ reload: false }}
            params={{dimValue,}}
            request={(params, sorter, filter) => {
              // 表单搜索项会从 params 传入，传递给后端接口。
              if(params.startTime && params.startTime.length>0){
                setFilterData(filterByName(trendData, params.startTime));
              }
              return;
            }}
            pagination={{
                showQuickJumper: true,
            }}
            toolBarRender={()=>[
              <Button key="out" onClick={()=>downloadFile()}>
                导出数据
              </Button>,
            ]}
            search={{
              filterType: 'light',
            }}
            />