你好，我想将一个项目从待办事项列表移动到 React js 中的完成列表，这是我的代码

Question

Hello i want to move an item from todo list to delete list in ReactJS and i want to delete it from todo list when i move it to done list i did everything i can delete the selected item or all items but i cant add it to done list when i move it

import React from 'react';
import './App.css';
import Todoinput from './Components/Todoinput'
import Todolist from './Components/Todolist'
import Tododone from './Tododone'
import { render } from 'react-dom';

import 'bootstrap/dist/css/bootstrap.min.css';
import uuid from 'uuid';

class App extends React.Component {
  state= {
    items:[],
    id:uuid(),
    item:'',
    editItem:false
  }
  handleChange = (e) => {
    this.setState ({
      item:e.target.value
    })
  }
  handleSubmit = (e) => {
    e.preventDefault ();
    const newItem = {
      id:this.state.id,
      title:this.state.item,
    };
    const updatedItems = [...this.state.items,newItem]
    this.setState ({
      items:updatedItems,
      item:'',
      id:uuid(),
      editItem:false
    })
  }
    clearList = (e) => {
      this.setState ({
        items:[]
      })
    }
  doneItem = (id) => {
    const doneItems = this.state.items.filter (item => item.id !== id)
      this.setState ({
        items:doneItems
      }) 

    }

  render() {
        return (
          <div className="container">
            <div className="row">
              <div className="col-10 mx-auto col-md-8 mt-4">

              <h3 className="text-capitalize text-center">Todo Inputs</h3>
             <Todoinput item={this.state.item} handleChange={this.handleChange}
             handleSubmit={this.handleSubmit}
             />
                <Todolist items={this.state.items} clearList={this.clearList} doneItem={this.doneItem}/>
              <Tododone doneItem={this.doneItem}/>

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


export default App;

/**/


import React from 'react'
import Todoitem from './Todoitem'

class Todolist extends React.Component {

    render() {
        const {items,clearList,doneItem}=this.props
        return (
            <ul className="list-group my-5">
                <h3 className="text-capitalize text-center">todo list</h3>

                {
                    items.map(item => {
                        return (
                        <Todoitem 
                        key={item} 
                        title={item.title}
                        doneItem={()=> doneItem(item.id)}
                        />
                        )

                    })
                }
                <button type="button" className="btn btn-danger btn-block text-capitalize mt-5"
                onClick={clearList}
                >clear list</button>
            </ul>
        )
    }
}

export default Todolist



/**/

import React from 'react'

class Todoinput extends React.Component {
    render() {
        const {item,handleChange,handleSubmit} = this.props
        return (
            <div className="card card-body my-3">
                <form onSubmit={handleSubmit}>
                    <div className="input-group">
                        <div className="input-group-prepend">
                            <div className="input-group-text bg-primary text-white">
                                <i className="fa fa-book" ></i>
                            </div>
                        </div>
                        <input type="text" className="form-control text-capitalize" placeholder="Add A To Do Item"
                        value={item}
                        onChange={handleChange}
                        />
                    </div>
                    <button type="submit" className="btn btn-block btn-primary mt-3">Add Item</button>
                </form>
            </div>
        )
    }
}

export default Todoinput

/**/


import React from 'react'

class Todoitem extends React.Component {

    render() {
  const {title,doneItem} = this.props
        return (
            <li className="list-group-item text-capitalize d-flex justify-content-between my-2">
                <h6>{title}</h6>
                    <div className="todo-icon">
                        <span className="mx-2 text-sucess"onClick={doneItem}>
                            <i className="fa fa-window-close"></i>
                        </span>
                    </div>
            </li>
        )
    }
}

export default Todoitem

/**/

import React from 'react'

class Tododone extends React.Component {

    render() {
        const {items,clearList,doneItem,title}=this.props
        return (
            <div>
            <h2 className="text-capitalize text-center">Done Items</h2>
            <li className="list-group-item text-capitalize d-flex justify-content-between my-2">
                <h6>{doneItem}</h6>
                    <div className="todo-icon">
                        <span className="mx-2 text-danger" onClick={doneItem}>
                            <i className="fa fa-trash"></i>
                        </span>
                    </div>
            </li>
            <button type="button" className="btn btn-danger btn-block text-capitalize mt-5"
                onClick={clearList}>clear list</button>
            </div>
        )
    }
}

export default Tododone

so if anyone can help Please i post all the code above if anyone can help me please <3

Answer 1

I've played around a bit with your code in here Sandbox

Essentially what I've done is move your state into hooks, and given each item an isComplete property, so you can have 2 lists, 1 complete and 1 incomplete.

It's not a full solution, but should give you a basic idea of how to manage your lists.

These are the 2 lines that give you your complete and incomplete items

const incompleteItems = items.filter(x => !x.isComplete);

const completeItems = items.filter(x => x.isComplete);