react ahooks テーブル内の各データは、カウントダウン関数を実装します

私たちの日常のニーズでは、カウントダウンを実装することが一般的な要件です。または、1 つのページに 2 つのカウントダウンを実装することもできますがantd 、Table

ここで要件があり、データのダウンロード操作をクリックし、30 秒のカウントダウンを開始し、もう一方をクリックして 30 秒のカウントダウンを開始しますが、2 つのカウントダウンは互いに競合しません

ahooksを使用できますuseCountDown

interval.js の内容

import React , {useState}from 'react';
import { Typography, Button } from 'antd';
import { useCountDown } from 'ahooks';


const Interval = ({
  className,
  style,
  btnType = 'Link',
  disabled,
  onClick,
  children,
}) => {
  const [targetDate, setTargetDate] = useState();
  const [countdown] = useCountDown({
    targetDate,
  });

  const onDownload = event => {
    setTargetDate(Date.now() + 30000);
    onClick?.(event);
  };

  const Component = btnType === 'Link' ? Typography.Link : Button;

  return (
    <Component
      style={style}
      type={'primary'}
      className={className}
      onClick={onDownload}
      disabled={countdown !== 0 || disabled}>
      {countdown === 0
        ? children ? children : '下载'
        : `${Math.round(countdown / 1000)}s 后可重新点击导出`}
    </Component>
  );
};

export default Interval;

index.js

import React from 'react'
import { Table} from 'antd'
import Interval from './interval'

const InterValCom = () => {
  const dataSource = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '3',
      name: '赵小刀',
      age: 36,
      address: '余杭区',
    },
  ];
  
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '操作',
      dataIndex: 'option',
      key: 'option',
      render: (_) => <Interval onClick={() => console.log('下载ing.....')}
    />,
    },
  ];
  return <>

  <Table  
  columns={columns}
  dataSource={dataSource}
  />

  
  </>

}

export default InterValCom