我正在使用版本7的表。我正在使用全局过滤器进行过滤，我从沙盒中复制了一些代码并将其集成到我的数据库中，这是我从中复制代码Open Sandbox的链接。问题是，每当我在搜索栏中写一些东西，重新渲染整个全局过滤器组件，并且输入字段每次都失去焦点时，我就不得不再次单击输入字段来输入文本，这很烦人由于重新渲染需要时间，因此我每次都必须单击输入字段。为什么会发生这种情况，为什么在反应表全局过滤器的沙箱示例中不会发生相同的事情。您可以在上面包含的链接中看到示例。
@PostMapping("/api/{path}")
<T> T save(@PathVariable("path") String path,
@RequestBody T entity)
如果我直接在return语句内编写全局过滤器的代码，则不会发生此问题，使用此方法整个组件不会重新呈现。像这样。
at org.springframework.cloud.openfeign.support.SpringDecoder.decode(SpringDecoder.java:62)
at org.springframework.cloud.openfeign.support.ResponseEntityDecoder.decode(ResponseEntityDecoder.java:45)
at feign.optionals.OptionalDecoder.decode(OptionalDecoder.java:23)
at feign.SynchronousMethodHandler.decode(SynchronousMethodHandler.java:165)
at feign.SynchronousMethodHandler.executeAndDecode(SynchronousMethodHandler.java:133)
at feign.SynchronousMethodHandler.invoke(SynchronousMethodHandler.java:76)
at feign.ReflectiveFeign$FeignInvocationHandler.invoke(ReflectiveFeign.java:103)
at com.sun.proxy.$Proxy208.save(Unknown Source)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at org.springframework.aop.support.AopUtils.invokeJoinpointUsingReflection(AopUtils.java:343)```
我其余的代码是这样的
她是我完整的代码。
return (
<>
<GlobalFilter
preGlobalFilteredRows={preGlobalFilteredRows}
globalFilter={state.globalFilter}
setGlobalFilter={setGlobalFilter}
/>
{/* //rest of the code*/}
.....
</> );
function GlobalFilter({
preGlobalFilteredRows,
globalFilter,
setGlobalFilter,
}) {
const count = preGlobalFilteredRows.length
return (
<span>
Search:{' '}
<input
value={globalFilter || ''}
onChange={e => {
setGlobalFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
}}
placeholder={`${count} records...`}
style={{
fontSize: '1.1rem',
border: '0',
}}
/>
</span>
)
}
答案 0 :(得分：1)
我已对您的完整代码进行了更正。您没有使用Sandbox中的Table函数（从中复制代码）。我测试了以下各项，它们工作正常，并且可以满足您的要求。请看看。
import React from 'react';
import {useTable, usePagination, useGlobalFilter} from 'react-table';
import matchSorter from 'match-sorter'
function SimpleTable(props) {
var paginationDisplay = {display: ''};
const data = React.useMemo(
() => [
{
col1: 'john doe',
col2: "world",
},
{
col1: 'react-table',
col2: 'rocks',
},
{
col1: 'whatever',
col2: 'you want',
},
{
col1: 'whatever',
col2: 'you want',
},
{
col1: 'whatever',
col2: 'you want',
},
{
col1: 'whatever',
col2: 'you want',
},
{
col1: 'whatever',
col2: 'you want',
},
{
col1: 'whatever',
col2: 'you want',
},
{
col1: 'whatever',
col2: 'you want',
},
],
[],
);
const columns = React.useMemo(
() => [
{
Header: 'STUDENT NAME',
accessor: 'col1', // accessor is the "key" in the data
Cell: (row) => {
return (
<>
{row.row.original.col1}
<p>FA16-BCS-067</p>
</>);
},
},
{
Header: 'ATTENDANCE',
accessor: 'col2',// use accessor name in hidden column to hide a column e.g intitalstate.hiddenColumns['col2']
},
{
Header: 'QUIZEZ',
accessor: '',
},
{
Header: 'ASSIGNMENT',
accessor: '',
},
{
Header: 'FIRST TERM',
accessor: '',
},
{
Header: 'MID TERM',
accessor: '',
},
{
Header: 'FINAL TERM',
accessor: '',
},
{
Header: 'action',
accessor: '',
Cell: (row) => {
return (
<button className="btn btn-danger"
onClick={() => console.log(row.row)}
>
View
</button>);
},
},
],
[],
);
function GlobalFilter({
preGlobalFilteredRows,
globalFilter,
setGlobalFilter,
}) {
const count = preGlobalFilteredRows.length
return (
<span>
Search:{' '}
<input
value={globalFilter || ''}
onChange={e => {
setGlobalFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
}}
placeholder={`${count} records...`}
style={{
fontSize: '1.1rem',
border: '0',
}}
/>
</span>
)
}
function fuzzyTextFilterFn(rows, id, filterValue) {
return matchSorter(rows, filterValue, {keys: [row => row.values[id]]})
}
// Our table component
function Table({columns, data}) {
const filterTypes = React.useMemo(
() => ({
// Add a new fuzzyTextFilterFn filter type.
fuzzyText: fuzzyTextFilterFn,
// Or, override the default text filter to use
// "startWith"
text: (rows, id, filterValue) => {
return rows.filter(row => {
const rowValue = row.values[id]
return rowValue !== undefined
? String(rowValue)
.toLowerCase()
.startsWith(String(filterValue).toLowerCase())
: true
})
},
}),
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
prepareRow,
canPreviousPage,
canNextPage,
nextPage,
previousPage,
setPageSize,
pageOptions,
state,
preGlobalFilteredRows,
setGlobalFilter,
state: {pageIndex, pageSize}
} = useTable({columns, data, initialState: {pageIndex: 0, pageSize: 5, hiddenColumns: ['']}},
useGlobalFilter, usePagination);
const count = preGlobalFilteredRows.length;
return (
<>
<GlobalFilter
preGlobalFilteredRows={preGlobalFilteredRows}
globalFilter={state.globalFilter}
setGlobalFilter={setGlobalFilter}
/>
{/* //table section */}
<div className="row">
<div className="col table-div-1 highlight table-2" style={{'overflowY': 'auto', 'height': '455px'}}>
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th
{...column.getHeaderProps()}
>
{column.render('Header')}
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map(row => {
prepareRow(row);
return (
<tr key={123} {...row.getRowProps()} >
{row.cells.map(cell => {
return (
<td
{...cell.getCellProps()}
onClick={() => console.log()}
>
{cell.render('Cell')}
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
</div>
</div>
{/* //pagination section */}
{props === props ? <>
<div className="row pagination" style={paginationDisplay}>
<span>
Page{' '}
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong>{' '}
</span>
<button className="btn btn-danger" onClick={() => previousPage()} disabled={!canPreviousPage}>
{'<'}
</button>
{" "}
<button className="btn btn-danger" onClick={() => nextPage()} disabled={!canNextPage}>
{'>'}
</button>
{" "}
<select className="btn btn-danger"
value={pageSize}
onChange={e => {
setPageSize(Number(e.target.value));
console.log(pageSize);
}}
>
{[5, 10, 20, 30].map(pageSize => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</select>
</div>
</> : null}
</>
);
}
return (
<Table columns={columns} data={data}/>
)
}
export default SimpleTable;