反应表所选行数

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 },

在prepareRow, in const之后。您可以像这样打印选定的行。

<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