如何基于React表中Firestore中的值设置复选框的默认状态

如何解决如何基于React表中Firestore中的值设置复选框的默认状态

如何根据React Table中Firestore中的值设置复选框的默认状态。 抱歉，这个问题有点基本。我已经阅读了官方文档，但并没有真正理解该如何做，我还查看了其他几个示例。

我希望在页面加载时检查Firestore文档中的值，然后设置复选框的默认值。我还希望用户能够选中/取消选中它，然后将在文档中更新该字段。

我已经在文档中查看了此initialState.selectedRowIds: Object<rowId: Boolean> 但无法弄清楚如何使其正常工作或需要与之联系的其他地方。

任何帮助将不胜感激。

以下是我的实现。

    import React from "react";
import {
  useTable,useFlexLayout,useFilters,useGlobalFilter,useRowSelect
} from "react-table";
import _ from "lodash";
// noinspection ES6CheckImport
import { useHistory } from "react-router-dom";
import Table from "react-bootstrap/Table";

// Define a default UI for filtering
function GlobalFilter({
  preGlobalFilteredRows,globalFilter,setGlobalFilter
}) {
  return (
    <span>
      <input
        value={globalFilter || ""}
        onChange={e => {
          setGlobalFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
        }}
        placeholder={" Search by any criteria"}
        style={{
          fontSize: "2.0rem",width: "100%"
        }}
      />
    </span>
  );
}

   
export const RecordTable = ({ forms }) => {
  const data = forms;
  let history = useHistory();

  const columns = React.useMemo(
    () => [
      {
        Header: "disclaimer Form Records",columns: [
          {
            Header: "Active",accessor: "active",width: 75,maxWidth: 75,maxHeight: 50,Cell: ({ row,column }) => (
              <div
                style={{
                  fontSize: "50px",textAlign: "center",display: "flex",justifyContent: "center",alignItems: "center",width: "100%",height: "100%"
                }}
                onClick={event => {
                  event.stopPropagation();
                  console.log("div OnClick");
                }}>
                <input
                  type="checkBox"
                  onClick={event => {
                    event.stopPropagation();
                    console.log("checkedIn Clicked: ",column);
                  }}
                  {...row.getToggleRowSelectedProps}
                />
              </div>
            )
          },{
            Header: "Time In",accessor: "timeIn"
          },{
            Header: "Time Out",accessor: "timeOut"
          },{
            Header: "€ Price",accessor: "totalGroupPrice",disableFilters: true,disableSortBy: true
          },{
            Header: "ShoeBox",accessor: "shoeBoxNumber"
          }
        ]
      }
    ],[]
  );

  const defaultColumn = React.useMemo(
    () => ({
      //minWidth: 20,maxWidth: 150,width: 120
    }),[]
  );

  const rowOnClick = (rowObject,column) => {
    history.push("/viewform",{ ...rowObject.original });
  };

  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,getTableBodyProps,headerGroups,rows,prepareRow,state,preGlobalFilteredRows,setGlobalFilter,setHiddenColumns
  } = useTable(
    {
      columns,data,defaultColumn,},useRowSelect
  );

  React.useEffect(() => {
    // for each column who's data is null,hide that column.

    let emptyColumns = [];

    _.forEach(data[0],function(value,key) {
      if (value === "") emptyColumns.push(key);
    });

    emptyColumns.push("parentEmailAddress");

    setHiddenColumns(emptyColumns);
  },[setHiddenColumns,columns]);

  // Render the UI for your table
  return (
    <div>
      <div>Records: {rows.length}</div>
      <GlobalFilter
        preGlobalFilteredRows={preGlobalFilteredRows}
        globalFilter={state.globalFilter}
        setGlobalFilter={setGlobalFilter}
      />

      <div
        style={{
          height: 500,border: "2px solid grey",borderRadius: "5px",overflow: "scroll"
        }}>
        <Table striped bordered hover responsive={"md"} {...getTableProps()}>
          <thead>
            {headerGroups.map(headerGroup => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                  <th {...column.getHeaderProps()}>
                    {column.render("Header")}
                  </th>
                ))}
              </tr>
            ))}
          </thead>

          <tbody {...getTableBodyProps()}>
            {rows.map((row,i) => {
              prepareRow(row);
              return (
                <tr
                  {...row.getRowProps({
                    onClick: () => rowOnClick(row)
                  })}>
                  {row.cells.map(cell => {
                    return (
                      <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </Table>
      </div>
    </div>
  );
};

解决方法

您可以在initialState中使用useTable，类似-

useTable({
    columns,data,defaultColumn,initialState: {
        selectedRowIds: {
            "row_1": true,"row_5": true
        }
    }
}

,

虽然可能不是最推荐的方式。

这对我有用：

我从firestore中读取了一个布尔值，然后将其传递给复选框。 每当我选中/取消选中该复选框时，我都会使用一个功能来切换Firestore中的值，并且我拥有一个快照功能，该功能已订阅了所有更改，因此会自动更新实际的复选框。

<input type="checkbox" checked={isChecked}