Reactjs 您好，我想在react js中将一个项目从待办事项列表移动到完成事项列表这是我的代码
您好我想在ReactJS中将一个项目从待办事项列表移动到删除列表，当我将其移动到完成列表时，我想将其从待办事项列表中删除我做了一切我可以删除所选项目或所有项目，但当我移动它时，我无法将其添加到完成列表中Reactjs 您好，我想在react js中将一个项目从待办事项列表移动到完成事项列表这是我的代码,reactjs,Reactjs,您好我想在ReactJS中将一个项目从待办事项列表移动到删除列表，当我将其移动到完成列表时，我想将其从待办事项列表中删除我做了一切我可以删除所选项目或所有项目，但当我移动它时，我无法将其添加到完成列表中 import React from 'react'; import './App.css'; import Todoinput from './Components/Todoinput' import Todolist from './Components/Todolist' import To
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
从“React”导入React；
导入“/App.css”；
从“./Components/Todoinput”导入Todoinput
从“./Components/Todolist”导入Todolist
从“./Tododone”导入Tododone
从'react dom'导入{render}；
导入'bootstrap/dist/css/bootstrap.min.css'；
从“uuid”导入uuid；
类应用程序扩展了React.Component{
状态={
项目：[]，
id:uuid（），
项目：“”，
editItem:false
}
handleChange=（e）=>{
这是我的国家({
项目：e.target.value
})
}
handleSubmit=（e）=>{
e、 防止违约（）；
常量newItem={
id:this.state.id，
标题：this.state.item，
};
const updateItems=[…this.state.items，newItem]
这是我的国家({
项目：updatedItems，
项目：“”，
id:uuid（），
editItem:false
})
}
clearList=（e）=>{
这是我的国家({
项目：[]
})
}
doneItem=（id）=>{
const doneItems=this.state.items.filter（item=>item.id！==id）
这是我的国家({
项目：doneItems
})
}
render（）{
返回(
待办事项输入
);
}
}
导出默认应用程序；
/**/
从“React”导入React
从“/Todoitem”导入Todoitem
类Todolist扩展了React.Component{
render（）{
const{items，clearList，doneItem}=this.props
返回(
待办事项清单
{
items.map（item=>{
返回(
doneItem（item.id）}
/>
)
})
}
清除列表
)
}
}
将默认值导出到列表
/**/
从“React”导入React
类Todoinput扩展了React.Component{
render（）{
const{item，handleChange，handleSubmit}=this.props
返回(
添加项
)
}
}
将默认值导出到doInput
/**/
从“React”导入React
类Todoitem扩展了React.Component{
render（）{
const{title，doneItem}=this.props
返回(
{title}
)
}
}
将默认值导出到doItem
/**/
从“React”导入React
类Tododone扩展了React.Component{
render（）{
const{items，clearList，doneItem，title}=this.props
返回(
已完成项目
{doneItem}
清除列表
)
}
}
导出默认TODONE
因此，如果有人能帮我，请我发布上面所有的代码如果有人能帮我，请我在这里玩了一下你的代码 基本上，我所做的是将您的状态移动到钩子中，并给每个项一个isComplete属性，这样您可以有两个列表，一个完整，一个不完整 这不是一个完整的解决方案，但应该给你一个如何管理列表的基本想法 这是两行代码，可以显示完整和不完整的项目
const incompleteItems = items.filter(x => !x.isComplete);
const completeItems = items.filter(x => x.isComplete);
函数
doneItem