有没有一种方法可以使用按钮反应来删除存储在状态中的数组中的项目

Question

我正在尝试构建一个 ToDoList 应用程序，我有两个组件。我有一个处理状态的主要组件和另一个按钮组件，它在我呈现的每个任务旁边呈现一个删除按钮。我遇到的问题是我似乎无法将删除按钮连接到数组的索引，并通过单击旁边的按钮来删除数组中的特定项目。

我尝试使用映射键 id 将索引连接到删除函数。

只需要关于我的删除函数应该是什么样子的帮助，以及它如何获取它旁边的项目的索引并删除它。

class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      userInput: '',

      toDoList : []

    }

    this.handleSubmit = this.handleSubmit.bind(this);

    this.handleChange = this.handleChange.bind(this);

    this.delete = this.delete.bind(this);

  }

  handleSubmit() {

    const itemsArray = this.state.userInput.split(',');

    this.setState({

      toDoList: this.state.toDoList.concat(itemsArray),

      userInput: ''

    });

  }

  handleChange(e) { 

    this.setState({

      userInput: e.target.value

    });

  }

  delete(id) {

    this.setState({

      toDoList: this.state.toDoList.filter( (item) => id !== item.id )

    })

  }

  render() {

    return (

      <div>

        <textarea

          onChange={this.handleChange}

          value={this.state.userInput}

          placeholder="Separate Items With Commas" /><br />

        <button onClick={this.handleSubmit}>Create List</button>

        <h1>My Daily To Do List:</h1>

        <Button toDoList={this.state.toDoList} handleDelete={this.delete} />

      </div>

    );

  }

}; 

class Button extends React.Component {

    constructor(props) {

        super(props);    

    }

    render() {

        return (

            <ul>

                {

                    this.props.toDoList.map( (item) => <li key={item.id}>{item.text}  <button onClick={this.props.delete(item.id)}>Done!</button></li> )

                }

            </ul>

        );

    }

};

Answer 1

在处理删除项目方面，您可以使用handleDelete(index) {&nbsp; &nbsp;// Use the splice array function: splice(index, deleteCount)&nbsp; &nbsp;this.todoList.splice(index, 1);}就这么简单