[英]In React-Table, how to check/uncheck all checkboxes in a row or column
[英]How to select checkboxes in row in react-virtuaized Table?
我已經使用 react-virtualized Table 組件實現了一個 Table。 我在表中添加了一個復選框列,現在想使用這些復選框實現 select 全部/選擇行功能。
現在,為了添加 select 全部/選擇行功能,我正在使用反應掛鈎來更改CheckBox
的checked
屬性,但它似乎不起作用。 下面是代碼鏈接,當我用實際數據向下滾動頁面時,選中的復選框 state 被刪除。
這是我想要做的代碼,除了 header 之外, checked
的行總是保持錯誤。 Header select 一切正常
...
import {Checkbox} from 'semantic-ui-react';
const[selectAll, setSelectAll] = useState(false):
const checked = [];
function _checkboxState(data) {
if (checked.includes(data.index)) {
checked.pop(data.index);
} else {
checked.push(data.index);
}
}
<Column
disableSort
dataKey="checkbox"
width={30}
headerRenderer={() => (
<Checkbox
checked={selectAll}
onChange={() => {
if (selectAll === true) {
setSelectAll(false);
} else {
setSelectAll(true);
}
}}
/>
)}
cellRenderer={({rowIndex}) => (
<Checkbox
checked={selectAll || checked.includes(rowIndex)}
onChange={(e, data) => {
_checkboxState(data);
}}
index={rowIndex}
/>
)}
/>
...
對此的任何幫助表示贊賞!
與此同時,在等待答案的過程中,我花了更多時間,發現我正在變異checked
並沒有使用useState
鈎子。
這是更新的代碼:
.....
const [checked, setChecked] = useState([]);
const _onChangeHeaderCheckbox = data => {
data.checked ? setChecked(sortedList.map(row => row.id)) : setChecked([]);
};
const _onChangeRowCheckbox = data => {
const newRow = sortedList[data.index].id;
checked.includes(newRow)
? setChecked(old => old.filter(row => row !== newRow))
: setChecked(old => [...old, newRow]);
};
....
<Column
disableSort
dataKey="checkbox"
width={30}
headerRenderer={() => (
<Checkbox
indeterminate={
checked.length > 0 && checked.length < sortedList.length
}
checked={checked.length === sortedList.length}
onChange={(e, data) => _onChangeHeaderCheckbox(data)}
/>
)}
cellRenderer={({ rowIndex }) => (
<Checkbox
checked={checked.includes(sortedList[rowIndex].id) === true}
onChange={(e, data) => _onChangeRowCheckbox(data)}
index={rowIndex}
/>
)}
/>
....
這是帶有虛擬數據的工作預覽:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.