在使用 react-bootstrap-table2 中，如何使用 ref 来实现全选的方法

简要概述

在我目前参与的项目中，我们使用react-bootstrap-table-next作为表格组件的基础。
有一天的任务是为表格的行添加全选和全解除的功能。
最简单的方法是使用react-bootstrap-table-next自带的行复选框功能。
然而，由于复选框较小，并且客户更喜欢按钮，所以我们决定创建全选/全解除按钮。

策略

當按下「全選/全解除」按鈕時，呼叫傳遞給table元件的selectRow的onSelectAll方法。

实施

这是对实际业务代码的抽象化。

useAllSelectフックでtableコンポーネントへのrefと全選択/解除のための
ボタンコンポーネントを受け取り、tableRefをテーブルコンポーネントに渡す

AllSelectButtonのonClickが発火されたら
tableRef?.current.selectionContext.handleAllRowsSelectが実行される

选择上下文（selectionContext）在内部执行了将onSelectAll作为参数传递给onSelectRow的操作（handleAllRowsSelect）

import React, { useRef } from "react";
import BootstrapTable from "react-bootstrap-table-next";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import { useAllSelect } from '../Hooks/AllSelect';

function App() {

  // 全選択/解除を行うためのカスタムフック
  const [tableRef, AllSelectButton] = useAllSelect();

  const handleSelectAll = (isSelected) => {
    // 全選択 or 全解除する時に行う処理
  };

  const columns = [
    // Define your columns here
  ];

  const data = [
    // Your data here
  ];

  const selectRow = {
    mode: "checkbox",
    hideSelectAll: true,
    onSelectAll: handleSelectAll,
  };

  return (
    <div>
      <AllSelectButton allSelectButtonName={'全選択'} allUnSelectButtonName={'全解除'} />
      <BootstrapTable
        ref={tableRef}
        keyField="id"
        data={data}
        columns={columns}
        selectRow={selectRow}
      />
    </div>
  );
}

export default App;

import React, { memo, useRef } from 'react';
import Button from '../../../atoms/Button';

export function useAllSelect() {
  const tableRef = useRef(null);
  const handleAllUnSelect = (e) => {
    tableRef?.current.selectionContext.handleAllRowsSelect(e, true);
  };
  const handleAllSelect = (e) => {
    tableRef?.current.selectionContext.handleAllRowsSelect(e, false);
  };

  const AllSelectButton = memo(
    ({ color, allSelectButtonName = '全選択', allUnSelectButtonName = '全選択解除', ...props }) => (
      <div className="mt-5 flex gap-x-5">
        <Button color={'success'} onClick={(e) => handleAllUnSelect(e)}>
          {allUnSelectButtonName}
        </Button>
        <Button color={'success'} onClick={(e) => handleAllSelect(e)}>
          {allSelectButtonName}
        </Button>
      </div>
    )
  );

  return [tableRef, AllSelectButton];
}

最后

我再次深刻感受到，不仅要查看文档，还要查看源代码是非常重要的。
虽然通过ref可以很快地知道如何执行，但我无法理解全选功能是如何实现的，
即使查看了文档，也找不到像qiita或zenn一样有参考价值的内容。
（也许只是查询方法不对，哈哈）
通过查看内部源代码，我终于明白可以通过访问selectionContext来实现。