reactjs - 从 React 中的数组中删除项目

Question

我的 removeItem 函数有问题(它应该删除当前嵌套按钮的 <li>，以及 this.state.list 上的数组中的项目)，目前没有代码，因为我尝试了很多东西，但没有任何效果，所以我最终使用了 console.logs看发生了什么所以我删除了它

import React, { Component } from 'react';
import './Todo.css';

class Todo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            text: ''
        }
        this.textChange = this.textChange.bind(this);
        this.addToList = this.addToList.bind(this);
        this.removeItem = this.removeItem.bind(this);
    }

    textChange(e) {
        this.setState({
            text: e.target.value
        })
    }

    addToList() {
        this.setState(prevState => ({
            list: prevState.list.concat(this.state.text),
            text: ''
        }))
    }

    removeItem(e) { ?
        ? ? ? ? ? ? ?
    }

    render() {
        return(
          <div>
            <h1>My Todo List</h1>
            <h3>Add item</h3>
            <input value={this.state.text} onChange={e => this.textChange(e)}/>
            <button onClick={this.addToList}>+</button>
            <ul>{this.state.list.map((x,y) => {
              return <li key={y}>{x}
              <button onClick={this.removeItem}>-</button>
              </li>})}
            </ul>
          </div>
        )
    }
}

export default Todo;

Answer 1

通过索引 从数组 中删除项目:

const newList = this.state.list.splice(index, 1);

通过值 从数组 中删除项目:

const newList = this.state.list.splice(this.state.list.indexOf(value), 1);