reactjs - React 组件不会在值更改时重新渲染并显示 CSS 更改
问题描述
我正在构建一个依赖于来自外部数据库的数据的 React 组件。
我想要它做的是映射数据,并在屏幕上呈现给定组件的列表。它成功地做到了这一点。
但是,我还希望它根据单击输入时执行的功能来更改自己的外观。
此输入是一个复选框,它可以将值从 false 更改为 true,或将 true 更改为 false,具体取决于是否选中。
如果输入被选中(即为真),则组件应添加两个属性 - 一个通过更改其背景颜色添加到整个容器 div,另一个添加删除线文本装饰到段落标记。
单击输入时值成功更改 - 如果值为 false,则更改为 true,如果输入为 true,则将其更改为 false。
然而,一旦输入被点击一次,它就不再改变样式。我本质上希望它根据价值不断变化 - 而不仅仅是一次。
谁能看到我在这里做错了什么?为什么 CSS 不是不断变化,而只变化一次?
注意 - 这只是我整个组件的一部分。这不是完整的文件 - 它只是正在呈现的内容的一部分。不确定这是否会影响事情。
这是我的组件代码:
const SubTasks = ({ subTasks, setSubTasks }) => {
const [individualTask, setIndividualTask] = useState("")
const pushTask = () => {
setSubTasks([...subTasks, {task: individualTask, completed: false} ])
setIndividualTask("")
}
return (
<div className="subtasks-container">
<label className="subtasks-label">Sub Tasks</label>
<div className="subtasks-box">
{
subTasks.map((task, key) => {
const setCompleted = () => {
if (task.completed === false) {
task.completed = true
} else {
task.completed = false
}
}
return (
<div className={task.completed ? "subtasks-task-container container-completed" : "subtasks-task-container"} key={key}>
<div className="create-sub-task-checkbox">
<input type="checkbox" value={task.completed} onClick={setCompleted} />
</div>
<div className="create-sub-task-title">
<p className={task.completed ? "create-task-completed" : ""}>{task.task}</p>
</div>
<div className="create-sub-task-controller">
<i className="fas fa-ellipsis-h"></i>
</div>
</div>
)
})
}
<div className="individual-task-input-container">
<input className="individual-task-input" type="text" value={individualTask} onChange={event => setIndividualTask(event.target.value)} />
<div className="create-task-button-container">
<button className="individual-task-button" onClick={pushTask}>Add</button>
</div>
</div>
</div>
</div>
)
}
这是CSS:
.subtasks-task-container {
height: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
margin: 5px 0;
border: 2px solid #e2e2e2;
border-radius: 5px;
margin-top: 20px;
}
.container-completed {
background-color: #a5e1ad;
}
.create-sub-task-title p {
font-size: 20px;
}
.create-task-completed {
text-decoration: line-through;
}
解决方案
你试过状态吗?我没有在下面运行代码,只是给出一些提示,如果需要,您可以对其进行修改。
subTasks.map((task, key) => {
const [getTask, setTask] = useState(task);
const setCompleted = () => {
if (getTask.completed === false) {
setTask({...getTask, "completed": true});
console.log(getTask.completed)
} else {
setTask({...getTask, "completed": false});
console.log(getTask.completed)
}
}
return (
<div className={getTask.completed ? "subtasks-task-container container-completed" : "subtasks-task-container"} key={key}>
<div className="create-sub-task-checkbox">
<input type="checkbox" value={getTask.completed} onClick={setCompleted} />
</div>
<div className="create-sub-task-title">
<p className={getTask.completed ? "create-task-completed" : ""}>{getTask.task}</p>
</div>
<div className="create-sub-task-controller">
<i className="fas fa-ellipsis-h"></i>
</div>
</div>
)
})
推荐阅读
- arrays - 在 Perl 中向下创建一个整数数组
- discord.js - discord.js 如何将清除命令限制在 14 天内而不抛出任何错误
- r - 使用 aes() 仅重新着色 ggplot 中的一行
- r - 如何在循环中找到后续索引?
- html - 如何将数据从 SQL Server 解析到 Jqgrid
- java - 如何在Java Stream中获取每种类型(按属性选择)的第一个对象(按函数排序)
- javascript - 为一段文本中的单个道具设置样式?
- flutter - 有没有什么可能的方法可以像在 Flutter Pageview 中的 Instagram 故事一样在右侧添加一个点击前进并点击左侧向后退?
- ionic-framework - 从 ionic 5 App 配置 Wifi 连接 (802.1x EAP)
- bash - 有人可以提供有关 OpenText Appworks 中动态案例管理的示例或资源吗