如何使用复选框完成待办事项列表中的任务?

Question

我是 React 的新手，我一直在使用状态钩子处理一个简单的待办事项列表。我在为函数分配style={{textDecoration: Checkbox.checked ? "line-through" : "" }}时遇到问题

function Checkbox(){
const [checked, setChecked] = useState(false);
return (
<label>
<input type="checkbox"
checked={checked}
onChange={() => setChecked(!checked)}
/>
</label>
);
}

为了完成一些任务。该任务应该是默认的"任务"，但一旦选中，我希望任务被划掉："T̶a̶s̶k̶"。我会为你发布我的尝试：

import React, {useState} from 'react';
function TodoList({ todo, index, completeTodo, removeTodo}) {
return (
<div className="todo"> 
<Checkbox />    
<div style={{textDecoration: Checkbox.checked ? "" : "line-through" }} >
{todo.text}
</div>
<div>
<button class = "button" onClick={() => removeTodo(index)}>Delete Task</button>
</div>
</div>
);
}
function Checkbox() {
const [checked, setChecked] = useState(false);

return (
<label>
<input type="checkbox"
checked={checked}
onChange={() => setChecked(!checked)}
/>
</label>
);
}
export default TodoList;

Answer 1

React 在单向数据绑定中工作，这意味着 Child 可以看到父状态，但父级看不到子的状态。

因此，为了实现你想要做的事情，你可以走两条路。

(

1. 最简单的(在复选框功能组件内移动文本，这样做可以绑定两个元素(复选框和文本(并共享状态。

(

2. 最难，在这种情况下不推荐(创建一个全局状态(使用上下文 api 或 Redux 或任何你想使用的状态(以将复选框的状态保存在全局状态，然后在 TodoList 组件中读取它。

如果要实现第一个路径，可以执行以下操作：

import React, {useState} from 'react';
function TodoList({ todoList }) {
const onRemoveItem = () => {
//remove item from todoList
}
return (
<div className="todo"> 
<Checkbox onRemoveItem={onRemoveItem} />
</div>
);
}
function Checkbox({ onRemoveItem }) {
const [checked, setChecked] = useState(false);

return (
<>
<label>
<input type="checkbox"
checked={checked}
onChange={() => setChecked(!checked)}
/>
</label>
<div style={{textDecoration: checked ? "" : "line-through" }} >
{todo.text}
</div>
<button class = "button" onClick={() => onRemoveItem()}>Delete Task</button>
</>
);
}
export default TodoList;