即使删除后仍保持检查状态

时间:2020-06-01 13:19:17

标签: reactjs

我选择要删除的项目,然后将其删除。然后,其余项目显示为选中状态。

如果有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?
    );
}

状态改变是问题吗?

0 个答案:

没有答案