我正在寻找一种方法,当取消选择一行时,删除数组中的数字。
当选择> id:[2,7,8]
==>当我取消选择一个项目时出现问题:id为8的示例:
取消选择时> id:[2,7,8]
id 8留在我的阵列中。
==>当我取消选择一个项目然后再次点击时出现问题:
id:[2,7,8,8]
constructor(props) {
super(props);
this.state = {
id: [],
};
this.onRowSelect = this.onRowSelect.bind(this);
this.onSelectAll = this.onSelectAll.bind(this);
}
onRowSelect(row, isSelected, e) {
let rowStr = '';
for (const prop in row) {
rowStr += prop + ': "' + row[prop] + '"';
if (isSelected == true){
this.setState({ id: [...this.state.id, row.id] })
}
}
console.log(`is selected: ${isSelected}, ${rowStr}`);
}
你必须使用map函数(https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map):
onSelectAll(isSelected, rows) {
console.log(`is select all: ${isSelected}`);
if (isSelected) {
console.log('Current display and selected data: ');
this.setState({ id: [...this.state.id, ...rows.map(x=>x.id)] })
} else {
console.log('unselect rows: ');
const ids = this.state.id.reduce((acc,id)=>{
return rows.find(x=>x.id === id) ? acc : [...acc,id]
},[])
this.setState({ id: [...ids] })
}
}
当isSelect为false时,您必须在您的状态中设置没有所选行ID的数组。过滤功能可以帮到你。
onRowSelect(row, isSelected, e) {
let rowStr = '';
for (const prop in row) {
rowStr += prop + ': "' + row[prop] + '"';
if (isSelected == true){
this.setState({ id: [...this.state.id, row.id] })
}else{
this.setState({ id: [...this.state.id.filter(x=>x!==row.id)] })
}
}
console.log(`is selected: ${isSelected}, ${rowStr}`);
}
当我使用
this.setState({id:[... this.state.id,rows [i] .id]})
他只检索该部分的最后一个ID
onSelectAll(isSelected, rows) {
console.log(`is select all: ${isSelected}`);
if (isSelected) {
console.log('Current display and selected data: ');
} else {
console.log('unselect rows: ');
}
for (let i = 0; i < rows.length; i++) {
console.log(rows[i].id);
this.setState({ id: [...this.state.id, rows[i].id] })
}
}