用React on复选框onChange更改元素的最佳方法是什么？

Question

当我onChange复选框时，我想删除列表中的待办事项列表项。我可以在CSS中完成此操作，但我想找出一种在状态下执行此操作的方法，以便在必要时可以更改应用程序的其他部分。

这是我到目前为止的所有代码。选中每个唯一的复选框后，我似乎无法弄清楚如何更改状态。

function AddItem(props) {
return (
    <div>
      <input 
        placeholder={props.placeholder}
        onChange={props.onChange}
        value={props.inputText}
      />
      <button 
        onClick={props.onClick}
      >
      Add Item
      </button>
    </div>
  );
}


class ToDoList extends Component {
  // creates each list item
  createTasks = (item) => {
    return (
      <li key={item.key}>
        <input 
          type="checkbox" 
          onChange={() => this.props.strikeItem(item)}
        />
        {item.text}
      </li>
    )
  }

  render() {
    //save the list of items and create a li for each one
    const listOfItems = this.props.allItems;
    const displayItems = listOfItems.map(this.createTasks);

    //display the list of li's
    return <ul>{displayItems}</ul>
  }
}


class ToDoApp extends Component {
  constructor(props) {
    super(props);
    this.state = { currentItem: { text: '', key: null, checked: false }, newItemsArray: []}
  }

  addNewItem() {
    if(this.state.currentItem.text) {
      this.setState({ newItemsArray: [...this.state.newItemsArray, this.state.currentItem]})
      this.setState({ currentItem: { text: '', key: null, checked: false }})
    } else {
      alert('you gotta type something')
    }
  }

  uniqueKey() {
    var rando = Math.floor(Math.random() * 999999)
    return rando
  }

  strikeItem = (item) => {
    // this.setState({})
    var itemsArr = this.state.newItemsArray.slice()
    //var itemIndex = itemsArr.findIndex(item)
    console.log(item)
    console.log(itemsArr)
    //-console.log(itemIndex)
  }

  render() {
    return (
      <div>
        <AddItem 
          placeholder="Add New Item"
          inputText={this.state.currentItem.text}
          onClick={() => this.addNewItem()}
          onChange={e => this.setState({ currentItem: { text: e.target.value, key: this.uniqueKey(), checked: false }})}
        />
        <ToDoList 
          allItems={this.state.newItemsArray}
          strikeItem={this.strikeItem}
        />
      </div>
    );
  }
}