我遵循下面的链接，并试图构建一个包含行选择的表格网格。
https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/row-selection
但是由于某种原因，它不起作用。它允许我选择任意两行。当我选择第三行时，先前的选择将不被记住。
这是代码段。
import React, { useState, useEffect, useRef } from "react";
import { useQuery } from "@apollo/react-hooks";
import { ContentWrapper } from "@nextaction/components";
import { useTable, useRowSelect, usePagination } from "react-table";
import $ from "jquery";
import { Row, Col, Button, Badge } from "reactstrap";
import FETCH_XXXXX_QUERY from "../queries/FetchXXXXXQuery";
import { Link } from "react-router-dom";
const IndeterminateCheckbox = React.forwardRef(
({ indeterminate, ...rest }, ref) => {
const defaultRef = React.useRef();
const resolvedRef = ref || defaultRef;
React.useEffect(() => {
resolvedRef.current.indeterminate = indeterminate;
}, [resolvedRef, indeterminate]);
return (
<>
<input type="checkbox" ref={resolvedRef} {...rest} />
</>
);
}
);
function XxxxxxGrid({ columns, data, prospectData }) {
// Use the state and functions returned from useTable to build your UI
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
selectedFlatRows,
state: { selectedRowIds },
} = useTable(
{
columns,
data,
prospectData,
},
useRowSelect,
(hooks) => {
hooks.visibleColumns.push((columns) => [
// Let's make a column for selection
{
id: "selection",
// The header can use the table's getToggleAllRowsSelectedProps method
// to render a checkbox
Header: ({ getToggleAllRowsSelectedProps }) => (
<div>
<IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
</div>
),
// The cell can use the individual row's getToggleRowSelectedProps method
// to the render a checkbox
Cell: ({ row }) => (
<div>
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
</div>
),
},
...columns,
]);
}
);
// Render the UI for your table
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>{column.render("Header")}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.slice(0, 10).map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
})}
</tr>
);
})}
</tbody>
</table>
);
}
const Xxxxxxxx = ({ actions, history }) => {
const { data, loading, error } = useQuery(QUERY);
const gridData = React.useMemo(() => (data ? data.xxxxx.data : []), [data]);
const [activeTab, setActiveTab] = useState("ALL");
const columns = React.useMemo(
() => [
{
Header: "Name",
accessor: "contactName",
Cell: function (props) {
return (
<span>
<b>
<Link to={"/xxxxx/" + props.row.original.id}>
{props.value}
</Link>
</b>
<br></br>
<span>{props.row.original.title}</span>
<br></br>
<Link to={"/xxxxx/" + props.row.original.id}>
{props.row.original.accountName}
</Link>
</span>
);
},
},
{
Header: "Cadence",
accessor: "accountName",
Cell: function (props) {
return (
<span>
<b>
<Link to={"/xxxxxxxx/" + cadence.id}>{props.value}</Link>
</b>
</span>
);
},
},
{
Header: "Tags",
accessor: "tag",
Cell: function (props) {
return (
<Badge color="secondary" pill>
{props.value}
</Badge>
);
},
},
{
Header: "C Outcome",
accessor: "phone",
},
{
Header: "E Outcome",
accessor: "title",
},
{
Header: "Last Contact",
accessor: "createdDate",
},
],
[]
);
const XxxxxxGrid = React.useMemo(
() => (
<XxxxxxGrid
columns={columns}
data={gridData}
prospectData={prospectData}
/>
),
[gridData]
);
return (
<ContentWrapper>
<div className="content-heading pb-0">
<div>
<em className="fa fa-user fa-lg"></em> Prospects
</div>
<div className="ml-auto">
<ul className="nav nav-tabs">
<li className="nav-item">
<a
href="#"
className={
"nav-link text-center" +
(activeTab === "xxxx" ? " active" : "")
}
>
<h4 className="text-primary">1522</h4>
<h6>xxx</h6>
</a>
</li>
<li className="nav-item">
<a
href="#"
className={
"nav-link text-center" +
(activeTab === "xxxx" ? " active" : "")
}
>
<h4 className="text-primary">1522</h4>
<h6>xxxx</h6>
</a>
</li>
<li className="nav-item">
<a
href="#"
className={
"nav-link text-center" +
(activeTab === "xxxx" ? " active" : "")
}
>
<h4 className="text-primary">1522</h4>
<h6>xxx</h6>
</a>
</li>
<li className="nav-item">
<a
href="#"
className={
"nav-link text-center" +
(activeTab === "xxxxxx" ? " active" : "")
}
>
<h4 className="text-primary">1522</h4>
<h6>xxxxx</h6>
</a>
</li>
</ul>
</div>
</div>
<Row className="mb-3">
<Col sm={4}>
<div className="input-group pl-0">
<input
type="text"
className="form-control"
placeholder="Search"
aria-label="Search"
aria-describedby="button-addon2"
/>
<div className="input-group-append">
<Button
color="outline-secondary"
type="button"
id="button-addon2"
>
<i className="fa fa-search"></i>
</Button>
</div>
</div>
</Col>
</Row>
<Row className="border-bottom border-top">
<div className="ml-auto">
<Button color="outline">
<em className="fas fa-file-csv text-primary"></em> Import CSV
</Button>
|
<Button color="outline">
<em className="fa fa-plus text-primary"></em> Add
</Button>
</div>
</Row>
<Row>{!loading && XxxxxxGrid}</Row>
</ContentWrapper>
);
};
export default Xxxxxxxx;
我发生了类似的事情，在我的情况下，该错误是由于与index.js中默认生成的StrictMode冲突而生成的。
尝试删除它
ReactDOM.render (
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById ('root')
索引应如下所示：
ReactDOM.render (
<App />,
document.getElementById ('root')
如果不起作用，请尝试查看此示例：https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/row-selection