【发布时间】：2019-12-09 07:21:51
【问题描述】：
我已经准备好撕掉我的头发了。所以我在我的 Javascript 课程中的最后一个项目是学习 React.js 的实验性东西，你可以在其中做一个基本的待办事项列表。我完成了所有工作并正常工作，我可以让它正确地添加东西。但我的最后一个障碍是让点击按钮上的打印段落会导致他们为打印的段落提供删除线属性，可以通过再次单击它来撤消它。
我到处查找，我尝试过这里的其他示例，没有我能想到的删除线发生了。我尝试了一个基本的 Javascript 函数，如果这是一个 HTML/非反应文件，它会做我想要的，但是当我尝试将它放入时它会破坏反应页面。所以我花了很长时间在一个试图弄清楚的教程上知道该怎么做，我也许找到了朝着正确方向迈出的一步？但我仍然无法发生任何事情，而且我不知道如何为此建立 onclick。
import React from 'react';
import './App.css';
class App extends React.Component {
setCurrentToDoItem = (toDoItem) => {
console.log("toDoItem", toDoItem);
this.setState({
currentToDoItem: toDoItem
});
};
saveToDoListItem = (toDoItem) => {
this.setState({
toDoList: [...this.state.toDoList,
toDoItem]
});
};
constructor(props) {
super(props);
this.state = {
currentToDoItem: null,
toDoList: [],
strikeThrough: []
};
}
render() {
return (
<div>
<h1>To Do List</h1>
<label>To Do Item: </label>
<input
onChange={(event) => this.setCurrentToDoItem(event.target.value)}>
</input>
<button onClick={() => this.saveToDoListItem(this.state.currentToDoItem)}>
<p>Add Item</p>
</button>
<p>{this.state.currentToDoItem}</p>
<div>
<p>To Do Items</p>
{
this.state.toDoList.map((item, index) => <p key={index}>{item} </p>)
}
</div>
</div>
);
}
}
export default App;
这是我的 App.js 代码。如您所见，其他一切都应该可以正常工作，但我不知道如何为this.state.toDoList.map((item, index) => <p key={index}>{item} </p>) 位的结果添加删除线效果，就像我在普通javascript中使用函数一样。如何通过 onclick 使打印的行删除线，然后如何通过再次单击它来撤消它？ （我假设第二次点击）我真的只需要知道如何获得有效的删除线，因为其他一切都非常有效。
【问题讨论】：
-
你试过 CSS 吗？单击时，添加一个类，例如
task-done，在其中，您可以使用 css 来完成这项工作。对于reference -
@Rajesh 我确实尝试了一个带有 CSS 的 javascript 函数，假设它可以工作，所以我尝试使用的 CSS 是这样的：`` (function() { document .getElementById("list") .addEventListener("click", function(e) { e.originalTarget.classList.toggle("line"); }); })(); ```然后我会将“line”类添加到css文件中，该文件使用linethrough文本装饰为该类分配任何内容，并将列表值赋予该P标签的另一部分，但我似乎无法得到在页面上工作而不会爆炸的功能。
-
好吧，我通过添加一个名为 endTask 的 CSS 进行了实验，并将其设置为删除线。我想我必须找到一种方法让它点击我刚刚添加到
{item}
行的现在新的“strike”段落 ID 标签.所以我需要找到一种方法来点击任何带有罢工 ID 的内容，导致它被添加到 endTask CSS 并被罢工......这就是障碍 -
@CollegeFox：你只是想删除，还是在删除时需要任何效果？
-
添加一个新数组，您可以在其中存储所有已完成的任务并将其保存到状态。然后对于每个任务，如果满足条件，则添加一个三元条件（即，该任务在“任务完成”的数组中，然后添加此样式 textDecoration: "line-through";
标签： javascript reactjs strikethrough