Javascript TODO反应不起作用

我正在尝试做一个待办事项列表，但我的问题是如何删除e.target.item-specific。使用Angular 5更容易。所以任何人都可以帮我解决这个问题，谢谢

import React, { Component } from 'react';

// Router
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
        items : [],
        userInput: ''
    };
  }

  changeUserInput(input) {
    this.setState({
      userInput: input
    });
  }
  addToList(input){
    let listArray = this.state.items;
    listArray.push(input);

    this.setState({
      items: listArray,
      userInput: ''
    })
  }

  deleteTodo(index){
    items : [];
    items.splice(index, 1);
    this.setState({items});
  } 

  // VIEW
  render() {


    return (
      <Router> 
        <div className="App">  

          {/* TODO LIST   */}
          <input
            type="text"
            onChange={
              (e)=>this.changeUserInput(e.target.value)
            }
            value={this.state.userInput}   
          />
          <button 
            onClick={
              ()=> this.addToList(this.state.userInput)
            }>add
          </button>
          <button
            onClick={
              (index)=> this.splice(this.state.userInput, [index, 1])
            }>remove
          </button>  

          <ul>
            {
              this.state.items
                .map( 
                  (val, index)=> 
                    <li key={index} 
                      onClick={this.deleteTodo.bind(this.index)}
                    >{val}</li>
                )  
            }
          </ul>                    

        </div>
      </Router>
    );
  }
}

export default App;

在deleteTodo函数中，如果出现语法错误，则必须编写

deleteTodo(index){
    const items = [...this.state.items];
    items.splice(index, 1);
    this.setState({items});
  } 

---

splice方法在数组中添加/删除项，并返回删除的项。我知道，但如何使用react语法？jacefarm caesay FakeRainBrigand JMM sophiebits mpen AlirezaLine 63：未定义“项目”未定义未定义第64行：未定义“项目”未未定义删除ToDo函数。