我将React Table v.7与我的React组件一起使用,以按Min
至Max
范围的整数值过滤列数据。要过滤的表列数据是美分,范围从100到39900。用于此操作的NumberRangeColumnFilter
方法的代码与https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/filtering的演示中的代码相同:
function NumberRangeColumnFilter({
column: { filterValue = [],preFilteredRows,setfilter,id },}) {
const [min,max] = React.useMemo(() => {
let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0
let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0
preFilteredRows.forEach(row => {
min = Math.min(row.values[id],min)
max = Math.max(row.values[id],max)
})
return [min,max]
},[id,preFilteredRows])
return (
<div
style={{
display: 'flex',}}
>
<input
value={filterValue[0] || ''}
type="number"
onChange={e => {
const val = e.target.value
setfilter((old = []) => [val ? parseInt(val,10) : undefined,old[1]])
}}
placeholder={`Min (${min})`}
style={{
width: '70px',marginRight: '0.5rem',}}
/>
to
<input
value={filterValue[1] || ''}
type="number"
onChange={e => {
const val = e.target.value
setfilter((old = []) => [old[0],val ? parseInt(val,10) : undefined])
}}
placeholder={`Max (${max})`}
style={{
width: '70px',marginLeft: '0.5rem',}}
/>
</div>
)
}
如何使过滤器接受输入的整数值,并用输入值乘以100来过滤行数据?
例如:Min
的输入值为1
,因此列数据的过滤从100
开始,显示的值大于或等于100
。 Max
值也是如此。