javascript - 如何根据反应表中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,
},
useFilters,
useGlobalFilter,
useFlexLayout,
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
in useTable
,例如 -
useTable({
columns,
data,
defaultColumn,
initialState: {
selectedRowIds: {
"row_1": true,
"row_5": true
}
}
}
推荐阅读
- python - 尝试在我的 Mac 上安装 Pillow for Python 时出现环境错误?
- javascript - 数组排序有两个要求
- javascript - 如何在多键数组中找到最大值?
- progressive-web-apps - 在 PWA 中与外围设备通信
- angular-material - 如何通过 flex-layout 使材料步进器水平居中?
- android - 在Android中显示包装列表的最佳方式?
- mysql - 需要使用 @ 更改 MYSQL 查询,因为我们更新了 Mysql 版本
- smartsheet-api - 批量操作 - 向工作表添加多行
- javascript - 如何在使用 async/await 捕获错误时避免嵌套错误消息?
- python - 根据字典值之一的长度对字典列表进行排序