[英]Building a todo app in React, used filters but need a way to make sure "complete" button only removes one task instead of two
I'm new to learning react so I followed this tutorial https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components to create a todo app and then tweaked it to fit the requirements of the project I'm working on.我是新手学习反应,所以我按照本教程https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components创建一个待办事项应用程序,然后对其进行调整以适应要求我正在做的项目。 Everything works the way it should except when I delete (complete) things from the associate side, it also deletes it from my main side as well.一切都按应有的方式工作,除非我从关联方删除(完成)事物,它也会从我的主要方删除它。 I understand the general concept of why that's happening (I don't have two separate lists in my code), just not sure how to go about fixing it without removing the filter I have in place.我理解为什么会发生这种情况的一般概念(我的代码中没有两个单独的列表),只是不确定如何在不移除我已有的过滤器的情况下修复它。 I had tried to implement a separate list for those tasks but just wasn't understanding how to go about it.我曾尝试为这些任务实现一个单独的列表,但只是不了解如何 go 关于它。
Added CodeSandBox for more context: https://codesandbox.io/s/hungry-sky-5f482?file=/src/index.js Check task items and then view the items you've checked in "Show Associate Tasks."添加了 CodeSandBox 以获得更多上下文: https://codesandbox.io/s/hungry-sky-5f482?file=/src/index.js检查任务项目,然后查看您在“显示关联任务”中检查的项目。 The issue is completing a task on the associate side also completes it on the "Show All Tasks" side.问题是在助理端完成任务也在“显示所有任务”端完成。
App.js应用程序.js
const FILTER_MAP = {
All: () => true,
Associate: task => task.checked
};
const FILTER_NAMES = Object.keys(FILTER_MAP);
function App(props) {
const [tasks, setTasks] = useState(props.tasks);
const [filter, setFilter] = useState('All');
function toggleTaskChecked(id) {
const updatedTasks = tasks.map(task => {
if (id === task.id) {
return {...task, checked: !task.checked}
}
return task;
});
setTasks(updatedTasks);
}
function completeTask(id) {
const remainingTasks = tasks.filter(task => id !== task.id);
setTasks(remainingTasks);
}
const taskList = tasks
.filter(FILTER_MAP[filter])
.map(task => (
<Todo
id={task.id}
name={task.name}
checked={task.checked}
key={task.id}
toggleTaskChecked={toggleTaskChecked}
completeTask={completeTask}
/>
));
const filterList = FILTER_NAMES.map(name => (
<FilterButton
key={name}
name={name}
isPressed={name === filter}
setFilter={setFilter}
/>
));
function addTask(name) {
const newTask = { id: "todo-" + nanoid(), name: name, checked: false };
setTasks([...tasks, newTask]);
}
return (
<div className="app">
<h1 className = "tasks-header">Task Tracker</h1>
<Form addTask={addTask}/>
<div className="list-buttons">
{filterList}
</div>
<ul
role="list"
className="todo-list"
aria-labelledby="list-heading"
>
{taskList}
</ul>
</div>
);
}
export default App
Todo.js Todo.js
export default function Todo(props) {
return (
<li className="todo stack-small">
<div className="c-cb">
<input id={props.id}
type="checkbox"
defaultChecked={props.checked}
onChange={() => props.toggleTaskChecked(props.id)}
/>
<label className="todo-label" htmlFor="todo-0">
{props.name}
</label>
</div>
<div className="btn-group">
<button type="button"
className="complete-button"
onClick={() => props.completeTask(props.id)}
>
Complete
</button>
</div>
</li>
);
}
index.js index.js
const DATA = [
{ id: "todo-0", name: "Brush Teeth", checked: false },
{ id: "todo-1", name: "Make Dinner", checked: false },
{ id: "todo-2", name: "Walk Dog", checked: false },
{ id: "todo-3", name: "Run Reports", checked: false },
{ id: "todo-4", name: "Visit Mom", checked: false },
{ id: "todo-5", name: "Aerobics", checked: false },
{ id: "todo-6", name: "Project", checked: false },
{ id: "todo-7", name: "Lecture", checked: false },
{ id: "todo-8", name: "Have Lunch", checked: false }
];
ReactDOM.render(
<React.StrictMode>
<App tasks={DATA}/>
</React.StrictMode>,
document.getElementById('root')
);
FilterButton.js过滤按钮.js
function FilterButton(props) {
return (
<button
type="button"
className="toggle-btn"
aria-pressed={props.isPressed}
onClick={() => props.setFilter(props.name)}
>
<span className="visually-hidden">Show </span>
<span>{props.name}</span>
<span className="visually-hidden"> Tasks</span>
</button>
);
}
export default FilterButton;
If I understand correctly, checking and completing a task are different.如果我理解正确,检查和完成任务是不同的。
If so, why not add a task property completed: false
by default to every task?如果是这样,为什么不添加一个任务属性completed: false
默认情况下为每个任务? And set it to true
each time the task is completed?并在每次任务完成时将其设置为true
?
{ id: "todo-0", name: "Brush Teeth", checked: false, completed: false },
The filters will select tasks by 2 different properties.过滤器将 select 任务按 2 个不同的属性。
const FILTER_MAP = {
All: () => true,
Associate: (task) => task.checked && !task.completed
};
// ...
function completeTask(id) {
const updatedTasks = tasks.map((task) =>
id === task.id ? { ...task, completed: true } : task
);
setTasks(updatedTasks);
}
Please comment if I misunderstood the question.如果我误解了这个问题,请发表评论。 It feels like I did.感觉就像我一样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.