我的反应表已将useInterval设置为
useThrottledCallback将复选框的一部分列为：
getTrProps并将状态设置为
getTrProps={(state, rowInfo) => {
if (rowInfo && rowInfo.row) {
return {
onClick: (e, handleOriginal) => {
console.log("RowInfo " + JSON.stringify(rowInfo.original))
let present = selected.indexOf(rowInfo.index);
let selectedCopy = selected;
if (present === -1){
selected.push(rowInfo.index);
setSelected(selected);
}
if (present > -1){
selectedCopy.splice(present, 1);
setSelected(selectedCopy);
}
handleToggle(rowInfo.index);
},
style: {
background: selected.indexOf(rowInfo.index) > -1 ? "black" : "white",
color: selected.indexOf(rowInfo.index) > -1 ? "white" : "black"
},
}
}
else {
return {}
}
}}
并将事件切换为
const columns = useMemo(
() => [
{
Header: state => (
<input
type="checkbox"
checked={allToggled}
onChange={() => handleToggleAll(allToggled)}
/>
),
Cell: row => (
<input
type="checkbox"
checked={toggled[row.index]}
onChange={() => handleToggle(row.index)}
/>
),
对于没有分页的表，该代码可以正常工作，但是当我添加了分页时，由于选择了索引const [ allToggled, setAllToggled ] = useState(false);
const [ toggled, setToggled ] = useState(Array.from(new Array(data.length), () => false));
，它将与另一页重叠，因此可以简单地在另一页上复制相同的选定行。 / p>
在这种情况下，我决定将const handleToggleAll = allToggled => {
let selectAll = !allToggled;
setAllToggled(selectAll);
let toggledCopy = [];
let selectedCopy = [];
data.forEach(function (e, index) {
toggledCopy.push(selectAll);
if(selectAll) {
selectedCopy.push(index);
}
});
setToggled(toggledCopy);
setSelected(selectedCopy);
};
const handleToggle = index => {
let toggledCopy = [...toggled];
toggledCopy[index] = !toggledCopy[index];
setToggled(toggledCopy);
if( toggledCopy[index] === false ){
setAllToggled(false);
}
else if (allToggled) {
setAllToggled(false);
}
};
更改为
indexOf(rowInfo.index)但是在这种情况下，我得到了getTrProps的不存在的元素（getTrProps={(state, rowInfo) => {
if (rowInfo && rowInfo.row) {
return {
onClick: (e, handleOriginal) => {
console.log("RowInfo " + JSON.stringify(rowInfo.original.id))
let present = selected.indexOf(rowInfo.original.id);
let selectedCopy = selected;
if (present === -1){
selected.push(rowInfo.original.id);
setSelected(selected);
}
if (present > -1){
selectedCopy.splice(present, 1);
setSelected(selectedCopy);
}
handleToggle(rowInfo.original.id);
},
style: {
background: selected.indexOf(rowInfo.original.id) > -1 ? "black" : "white",
color: selected.indexOf(rowInfo.original.id) > -1 ? "white" : "black"
},
}
}
else {
return {}
}
}}
）
所以我的问题是为什么我要得到它以及如何使它正常工作？有没有一种方法可以使用-1属性正确设置它？