React表中所选行数

Question

我正试图了解如何从react表中获取所选行的数量。此外，我想将所选行的数量发送到另一个同级组件中，该组件将根据所选行数(至少10行(启用或禁用。请帮忙。如果有人能设计一个模式，我可以编辑表中选定行的值(仅当选定行时(，并且值显示在编辑模式中，我也会很有帮助。

import React, { useState } from 'react'
import  { useMemo } from 'react'
import table from '../assets/json/mock.json'
import { useTable,useRowSelect, useSortBy, usePagination} from 'react-table';
import {useSticky} from 'react-table-sticky'
const Table =({columns,data})=> {
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} />
</>
)
}
)
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
page,
nextPage,
previousPage,
canNextPage,
canPreviousPage,
pageOptions,
state,
gotoPage,
pageCount,
setPageSize,
selectedFlatRows,
prepareRow,
}=useTable({
columns,
data,
initialState : {pageIndex : 0}
},
useSortBy,usePagination,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,
])
}
)
const {pageIndex,pageSize,selectedRowIds}=state

return (
<>
<table className="database-table sticky" {...getTableProps()}>
<thead className='header'>
{
headerGroups.map((headerGroup)=>
(

<tr {...headerGroup.getHeaderGroupProps()}>
{
headerGroup.headers.map((column) =>
(
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render(`Header`)}
<span>
{
column.isSorted ? (column.isSortedDesc ? '▼':'▲'):''
}
</span>
</th>
))
}
</tr>
))
}
</thead>
<tbody {...getTableBodyProps()}>
{
page.map((row)=>
{
prepareRow(row)
return(
<tr {...row.getRowProps()}>
{row.cells.map((cell)=>{
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})
}
</tbody>
</table>
<div className='header-bottom'>
{       

headerGroups.map((headerGroup)=>
(

<tr {...headerGroup.getHeaderGroupProps()}>
{
headerGroup.headers.map((column) =>
(
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render(`Header`)}
<span>
{
column.isSorted ? (column.isSortedDesc ? '▼':'▲'):''
}
</span>
</th>
))
}
</tr>
))
}
</div>
<div className='table-footer'>
<div className='page-no'id='modal-item'>
Viewing :     {pageIndex+1} of {pageOptions.length}     
</div>
<span className ='copyright'> 
© 2022 Highradius.All Rights Reserved
</span>
<span className='rowno' id='modal-item'>
Rows per Page :
<select value={pageSize} onChange={e=>setPageSize(Number(e.target.value))}>
{
[10,20,30,40,50].map(pageSize=>(
<option key={pageSize} value={pageSize}>
{pageSize  }
</option>
))
}
</select>
</span>
<button   button onClick={()=>previousPage()} disabled={!canPreviousPage} id='pag-btn'>{' < '}</button>
<button   button onClick={()=>nextPage()} disabled={!canNextPage} id='pag-btn' >{' > '}</button>
</div>      
</> 
)
}
export default Table

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

添加

selectedFlatRows,
state: { selectedRowIds },

在CCD_ 2中的CCD_。您可以像这样打印选定的行。

<p>Selected Rows: {Object.keys(selectedRowIds).length}</p>
<pre>
<code>
{JSON.stringify(
{
selectedRowIds: selectedRowIds,
'selectedFlatRows[].original': selectedFlatRows.map(d => d.original),
},
null,
2
)}
</code>
</pre>

下面是一个工作示例：https://codesandbox.io/s/naughty-pond-3e5jp