如何将样式应用于数组中的特定项

Question

我正在尝试在react中制作一个简单的todo。我希望能够点击待办事项文本旁边的按钮，并用一行文字将其标记为完整，所以我想按钮的目的是在两种样式之间切换。但我不知道如何将样式应用于特定的待办事项。到目前为止，这是我的代码：

import React, { useState } from 'react';
function App() {
const [todos, setTodos] = useState([])
const toggleComplete = (i) => {
setTodos(todos.map((todo, k) => k === i ? {
...todo, complete: !todo.complete
} : todo))
}
const handleSubmit = (event) => {
event.preventDefault()
const todo = event.target[0].value
setTodos((prevTodos) => {
return [...prevTodos, {
userTodo: todo, completed: false, id: Math.random().toString()
}]
})
}
return (
<div>
<form onSubmit={handleSubmit}>
<input placeholder='name'></input>
<button type='submit'>submit</button>
</form>
<ul>
{todos.map((todos) => <li key={todos.id}>
<h4>{
todos.completed ? <s><h4>{todos.userTodo}</h4></s> : <h4>{todos.userTodo}</h4>}
</h4>
<button onClick={toggleComplete}>Mark as complete</button>

</li>)}
</ul>
</div>
);
}
export default App;

Answer 1

您可以看到toggleComplete函数接受一个参数i，它是todo的id，所以您应该像onClick={() => toggleComplete(todos.id)}一样调用它。

然而，这仍然不起作用，因为您将随机数作为字符串作为id分配给todo，然后在数组上迭代。

正如Alex所指出的，你的代码中有一个关于完成切换的错误，所以我修复了它，下面是一个你可以查看和改进的代码的工作版本：

import React, { useState } from "react";
export default function App() {
const [todos, setTodos] = useState([]);
const toggleComplete = (i) => {
setTodos(
todos.map((todo, k) => {
return k === i
? {
...todo,
completed: !todo.completed
}
: todo;
})
);
};
const handleSubmit = (event) => {
event.preventDefault();
const todo = event.target[0].value;
setTodos((prevTodos) => {
return [
...prevTodos,
{
userTodo: todo,
completed: false,
id: prevTodos.length
}
];
});
};
return (
<div>
<form onSubmit={handleSubmit}>
<input placeholder="name"></input>
<button type="submit">submit</button>
</form>
<ul>
{todos.map((todo) => (
<li key={todo.id}>
{todo.completed ? (
<s>
<p>{todo.userTodo}</p>
</s>
) : (
<p>{todo.userTodo}</p>
)}
<button onClick={() => toggleComplete(todo.id)}>
Mark as complete
</button>
</li>
))}
</ul>
</div>
);
}

Answer 2

如我所见，您的代码中有两个问题：

toggleComplete函数中的

1. 拼写错误

修复：以下代码complete: !todo.complete可能是completed: !todo.completed，因为这是您在下面的handleSubmit上设置的密钥的名称。

2. toggleComplete函数接收javascriptevent对象作为参数，并在此处将其与key进行比较：(todo, k) => k === i

(请参阅此处的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)

修复：您可以修改todo渲染的代码行，如下所示：

{todos.map((todo, index) => <li key={todo.id}>
<React.Fragment>{
todo.completed ? <del><h4>{todo.userTodo}</h4></del> : <h4>{todo.userTodo}</h4>}
</React.Fragment>
<button onClick={() => {toggleComplete(index)}}>Mark as complete</button>
</li>)}