reactjs - React 中的 Todo 应用程序 - 想要添加按钮，单击该按钮会删除整个待办事项列表

问题描述

我在 React 中创建了一个 ToDo 应用程序。我想添加一个按钮，当我点击它时会删除整个待办事项列表并向用户显示消息“你没有任何待办事项”。我正在尝试添加功能，但似乎找不到完美的方法。

我已经给所有的 Todos 一个唯一的 id，我也获取了这些 id，但不知道如何使用它们从一个按钮中删除所有的 Todos。帮我。提前致谢

这是我的主要组件App.js

import React, { Component } from 'react';
import PrintTodo from "./printtodo"
import Addtodo from "./addTodo"

class App extends Component {

  state = {
    todos: [
        {id:1, content:"Buy Tomatoes"},
    ]
  }

  deleteTodo = (id) => {
    const todos = this.state.todos.filter(todo => {
      return todo.id !== id
    })

    this.setState({
      todos
    })
  }

  addTodo = (todo) => {
    todo.id = Math.random()
    // console.log(todo)
    let todos = [...this.state.todos, todo]
    this.setState({
      todos
    })
  }

  button = () => {
    // console.log(this.state)
    const allTodos = this.state.todos.filter(todo => {
       console.log(todo)
    })

    // const id = 10;
    // console.log(allTodos)
    // allTodos.forEach(todo => {
    //     // console.log(todo)
    //    const arr = new Array(todo)
    //    arr.pop()

    // })
}

  render(){
    // console.log(this.state)
    return (
      <div className="App">
        <div className="container">
          <header className="text-center text-light my-4">
            <h1>ToDo - List</h1>
            <form>
              <input type="text" name="search" placeholder="Search ToDo's" className="form-control m-auto"/>
            </form>
          </header>


        <PrintTodo addTodo={this.state.todos} deleteTodo={this.deleteTodo}/>


        <Addtodo addTodo={this.addTodo} allTodos={this.button}/>


        </div>
      </div>
    )
  }
}

export default App;

PrintTodo 组件

import React from 'react'

const printTodo = ({addTodo, deleteTodo, }) => {
    // console.log(addTodo)
    const todoList = addTodo.length ? (
        addTodo.map(todo => {
            return (
                <ul className="list-group todos mx-auto text-light" key={todo.id}>
                    <li className="list-group-item d-flex justify-content-between align-items-center">
                        <span>{todo.content}</span>
                        <i className="far fa-trash-alt delete" onClick={()=>{deleteTodo(todo.id)}}></i>
                    </li>
                </ul>

            )
        })
    ) : (
        <p className="text-center text-light">You don't have any ToDo's</p>
    )

    return (
      <div>
        {todoList}
      </div>
    )

    } 

export default printTodo

AddTodo 组件

import React, { Component } from 'react'

class Addtodo extends Component{
    state = {
        content: ""
    }

    handleChange = (e) => {
        this.setState({
            content: e.target.value
        })
    }

    handleSubmit = (e) => {
        e.preventDefault()
        this.props.addTodo(this.state)
        this.setState({
            content: ""
        })
    }



    render(){
        // console.log(this.props.allTodos)
        return(
            <div>
                <form className="text-center my-4 add text-light" onSubmit={this.handleSubmit}>
                    <label htmlFor="add">Add a New ToDo</label>
                    <input onChange={this.handleChange} type="text" name="add" id="add" className="form-control m-auto" value={this.state.content}/>
                </form>

                <button onClick={() => {this.props.allTodos()}}>Clear Whole List</button>
            </div>
        )
    }
}

export default Addtodo

标签： reactjs

reactjs - React 中的 Todo 应用程序 - 想要添加按钮，单击该按钮会删除整个待办事项列表

问题描述

解决方案

推荐阅读