英文:
Problem when trying to update the object of a React state
问题
以下是代码的翻译部分：
我正在制作一个待办事项应用程序。我试图让"completed"按钮在被点击时能够改变React状态中对象中的"state"值，从false变为true。我不确定如何处理handleChange函数。
import { useState } from "react";
import "./App.css";
function App() {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState([]);
const [todosText, setTodosText] = useState("");
function handleOnChange(e) {
setTodosText(e.target.value);
}
function handleAdd() {
setTodos((prevState) => {
return [...prevState, { text: todosText, status: false }];
});
}
function handleOnSubmit(e) {
e.preventDefault();
}
function handleChange() {}
const showText = todos.map((txt) => (
<li key={txt.text} className={!txt.status ? "" : "dark"}>
<span>{txt.text}</span>
<button onClick={handleChange}>完成</button>
</li>
));
console.log(todos);
return (
<div className="App">
<h1>待办事项清单</h1>
<form onSubmit={handleOnSubmit}>
<input type="text" name="todoItem" onChange={handleOnChange} />
<button onClick={handleAdd}>添加</button>
</form>
<ul>{showText}</ul>
</div>
);
}
export default App;
注意：翻译中的"完成"按钮已被翻译为"完成"。
英文:
I am making a Todo app. I am trying to give the completed button the ability to change the value of "state" in the object located in the React state from false to true whenever it is clicked. i am not sure how to go about with the handleChange function.
import { useState } from "react";
import "./App.css";
function App() {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState([]);
const [todosText, setTodosText] = useState("");
function handleOnChange(e) {
setTodosText(e.target.value);
}
function handleAdd() {
setTodos((prevState) => {
return [...prevState, { text: todosText, status: false }];
});
}
function handleOnSubmit(e) {
e.preventDefault();
}
function handleChange() {}
const showText = todos.map((txt) => (
<li key={txt.text} className={!txt.status ? "" : "dark"}>
<span>{txt.text}</span>
<button onClick={handleChange}>Completed</button>
</li>
));
console.log(todos);
return (
<div className="App">
<h1>ToDo list</h1>
<form onSubmit={handleOnSubmit}>
<input type="text" name="todoItem" onChange={handleOnChange} />
<button onClick={handleAdd}>Add</button>
</form>
<ul>{showText}</ul>
</div>
);
}
export default App;
答案1
得分: 1
检查你的ID与你的待办事项列表ID是否匹配，如果匹配，则将状态设置为true，否则返回相同的待办事项对象。
你的待办事项中没有唯一标识符，所以我添加了它，请参考Codesandbox。
function handleChange(id) {
setTodos((prevState) =>
prevState.map((todo) =>
todo.id === id ? { ...todo, status: true } : todo
)
);
}
Codesandbox链接：https://codesandbox.io/s/unruffled-wright-lomhuc?file=/src/App.js:453-615
英文:
Check your id with your todo list id and if both matches then make your status true else return same todo object.
There is no unique identifier in your todo so I added it, please refer the codesanbox
function handleChange(id) {
setTodos((prevState) =>
prevState.map((todo) =>
todo.id === id ? { ...todo, status: true } : todo
)
);
}
Codesandbox: https://codesandbox.io/s/unruffled-wright-lomhuc?file=/src/App.js:453-615
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论