我选择要删除的项目,然后将其删除。然后,其余项目显示为选中状态。
如果有item1,item2,item3,item4,并检查项目1,2,然后将其删除。 然后,仅保留项目3和4,但呈现为选中状态。如何初始化?
this.state = {
options: [],
subject: []
....
}
_delete() {
const selected = this.state.options
const newList = this.state.subject
if(selected.length !== 0){
if(selected.length > 1){
let i
selected.sort(function(a, b) {
return b - a;
// 11, 10, 4, 3, 2, 1
});
for(i=0; i<selected.length; i++){
newList.splice(selected[i],1)
}
}
else{
newList.splice(selected[0],1)
}
}
this.setState({options: [], subject: newList})
render(){
return(
{this.state.subject.map((item, index) => {
return <TableRow style={{'alignItems':'center'}}>
<TableCell style={{"textAlign":"center"}}><Checkbox onChange={function(e){
const selected = this.state.options
let cancel
if(e.target.checked){
selected.push(index)
}
else{
cancel = selected.indexOf(index)
selected.splice(cancel,1)
}
this.setState({
options: selected
})
}.bind(this)}></Checkbox></TableCell>
<TableCell style={{"textAlign":"center"}}>{item.fields.course_year}</TableCell>
<TableCell style={{"textAlign":"center"}}>{item.fields.course_semester}</TableCell>
<TableCell style={{"textAlign":"center"}}>{item.fields.course_colgnm}</TableCell>
<TableCell style={{"textAlign":"center"}}>{item.fields.course_sustnm}</TableCell>
<TableCell style={{"textAlign":"center"}}>{item.fields.course_pobjnm}</TableCell>
<TableCell style={{"textAlign":"center"}}>{item.fields.course_sbjtclss}</TableCell>
<TableCell style={{"textAlign":"center"}}>{item.fields.course_clssnm}</TableCell>
<TableCell style={{"textAlign":"center"}}>{item.fields.course_pnt}</TableCell>
<TableCell style={{"textAlign":"center"}}>{item.fields.course_remk}</TableCell>
</TableRow>}
)}
<Button variant="contained" color="primary" size='large' onClick={this._delete.bind(this)}>delete</Button?
);
}
状态改变是问题吗?