如何删除待办事项应用程序中已完成的列表项？

Question

我正在尝试删除基于react的todo应用程序中的完整列表项。我尝试了许多方法来执行此操作，但最后“完成”按钮什么也没做。完成按钮在控制台日志中没有给出任何错误，只是没有做任何让我混淆错误排序的事情

export default class Todo extends Component {
    constructor() {
        super();
        this.state = {
            text: "",
            todoList: [],
            completed: {
            }
        }
    }
    handleText = (e) => {
        this.setState({ text: e.target.value });
    };

    addTodo = () => {
        let { text, todoList } = this.state;
        let list = [...todoList];
        list.push(text);
        this.setState({ todoList: list, text: "" })
    };

    delTodo = index => () => {
        alert(index);
        const list2 = [...this.state.todoList];
        list2.splice(index, 1);
        this.setState({ todoList: list2 })
    };

我使用下面的handleCheck函数来检查项目是否已完成，但是没有执行任何操作。

handleCheck(index) {
    // code to create line through completed item
    this.setState(state => ({
        completed: { ...this.state.completed, [index]: !state.completed[index] }
    }));
}


render() {
    let { text, todoList } = this.state;
    return (
        <div className="App-header">
            <div className="childApp">
                <h1 style={{ textAlign: "center" }}>To-Do APP!</h1>
                <h3>You have {todoList.length} Todos</h3>
                <br />
                <ul className="list-group">
                    {todoList.map((val, index) => {
                        return (
                            <div className="mytodo">
                                <li key={index} className="list-group-item">
                                    <span className="spname"> {val} </span>
                                    <button id={index} className="btn btn-default btn-s pull-right remove-item" onClick={this.delTodo(index)}>
                                        <span className="glyphicon glyphicon-remove"></span>
                                    </button>
                                    <button type="button" onChange={() => this.handleCheck(index)} className="btn btn-default btn-s pull-right remove-item">Done</button>
                                </li>
                                {/* <li key={index} className="displaylist">{val}</li>
                 <button type="button" className="btn btn-danger">Delete</button>          */}
                            </div>
                        );
                    }

                    )}
                </ul>
                <br />
                <h4>Add a new To-Do</h4>
                <input className="todoinput" name="text" value={text} placeholder="Enter new task" onChange={this.handleText} />
                <br />

                <button type="button" onClick={this.addTodo} className="btn">Add Todo</button>

                <br /><br />
            </div>
        </div>
    );}}