Javascript 通过onClick删除React.js中的段落？

我几乎要把头发扯下来了。因此，我在Javascript类中的最后一个项目是学习React.js的一个实验性项目，在这里您可以完成一个基本的待办事项列表。我已经完成了所有的工作，我可以让它正确地添加东西。但我的最后一个障碍是，一旦点击按钮中的打印段落，就会使它们为打印段落提供删除线属性，再次单击该属性可以撤消该属性

我到处都查过了，我试过这里的其他例子，我想不出有什么能让罢工发生。我尝试了一个基本的Javascript函数，如果这是一个HTML/non-react文件，它可以实现我想要的功能，但是当我尝试插入它时，它会破坏react页面。所以我花了很长时间在一个教程上，试图找出该做什么，也许我找到了正确的方向？但我仍然不能让任何事情发生，我不知道如何建立一个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;

从“React”导入React；
导入“/App.css”；
类应用程序扩展了React.Component{
setCurrentToDoItem=（toDoItem）=>{
日志（“toDoItem”，toDoItem）；
这是我的国家({
当前待办事项：待办事项
});
};
saveToDoListItem=（toDoItem）=>{
这是我的国家({
toDoList:[…this.state.toDoList，
toDoItem]
});
};
建造师（道具）{
超级（道具）；
此.state={
currentToDoItem:null，
托多利斯特：[]，
删除线：[]
};
}
render（）{
返回(
待办事项清单
待办事项：
this.setCurrentToDoItem（event.target.value）}>
this.saveToDolitItem（this.state.currentToDoItem）}>
添加项

{this.state.currentToDoItem}

待办事项

{
this.state.toDoList.map（（item，index）=>
{item}
）
}
);
}
}
导出默认应用程序；

这是我的App.js代码。正如您所看到的，其他一切都应该可以正常工作，但是我不知道如何为

this.state.toDoList.map（（item，index）=>
{item}
）

的结果添加删除线效果，就像我在普通javascript中使用函数一样。如何通过onclick使打印的行删除，然后通过再次单击该行来撤销该行？（我想再点击一次）我真的只需要知道如何用它来获得一个有效的删除线，因为其他一切都很有效。

查看此解决方案

我已经修改了您的代码以实现所需的功能。 此代码完全符合您的要求。

请查看此解决方案

我已经修改了您的代码以实现所需的功能。

---

这段代码正是您想要的。

最舒适的方法之一是按照注释中的建议。实现这一点的一个非常快速的方法是切换类列表。在下面的代码中，我添加了一个函数

crossLine

，它切换类名“crossLine”，并在映射到dos上添加事件侦听器（在

render

函数中）。然后在你的

App.css

中添加一行

。交叉线{
文字装饰：线条贯通；
}

这是您编辑的组件代码

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
currentToDoItem:null，
托多利斯特：[]，
删除线：[]
};
}
setCurrentToDoItem=toDoItem=>{
这是我的国家({
当前待办事项：待办事项
});
};
saveToDoListItem=toDoItem=>{
这是我的国家({
toDoList:[…this.state.toDoList，toDoItem]
});
};
交叉线=事件=>{
常量元素=event.target；
元素.classList.toggle（“交叉线”）；
};
render（）{
返回(
待办事项清单
待办事项：
this.setCurrentToDoItem（event.target.value）
}
/>
this.saveToDoListItem（this.state.currentToDoItem）
}
>
添加项

{this.state.currentToDoItem}

待办事项

{this.state.toDoList.map（（项，索引）=>{
返回(

{item}{”“}

);
})}
);
}
}

最舒适的方法之一是按照评论中的建议。实现这一点的一个非常快速的方法是切换类列表。在下面的代码中，我添加了一个函数

crossLine

，它切换类名“crossLine”，并在映射到dos上添加事件侦听器（在

render

函数中）。然后在你的

App.css

中添加一行

。交叉线{
文字装饰：线条贯通；
}

这是您编辑的组件代码

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
currentToDoItem:null，
托多利斯特：[]，
删除线：[]
};
}
setCurrentToDoItem=toDoItem=>{
这是我的国家({
当前待办事项：待办事项
});
};
saveToDoListItem=toDoItem=>{
这是我的国家({
toDoList:[…this.state.toDoList，toDoItem]
});
};
交叉
<p onClick={ () => this.handleClick(index) } className={ item.isComplete ? 'completed' : '' } key={index}>{item.value} </p>

{
    value: string;
    isComplete: boolean
}

const initialState = {
  items: [
    { text: "Learn JavaScript", done: false },
    { text: "Learn React", done: false },
    { text: "Play around in JSFiddle", done: true },
    { text: "Build something awesome", done: true }
  ]
};

function appReducer(state, action) {
  switch (action.type) {
    case 'ITEM_STATUS_CHANGE':{
       let affected = state.items.slice();
       affected[action.index].done = !affected[action.index].done;
       return Object.assign({}, state,  { items: affected });
    }

    case 'ADD_ITEM_TO_LIST':{
       let affected = state.items.slice();
       affected.push({ text: action.data, done : false})   
       return Object.assign({}, state,  { items: affected });
    }

    default:
      throw new Error();
  }
}

function TodoApp(props){
    const [state, dispatch] = React.useReducer(appReducer, initialState);

    return (
      <div>
        <h2>Todos: 
          <input type="text" id="todoTextItem"/>
          <button 
          onClick={()=>{
                dispatch({
                type: 'ADD_ITEM_TO_LIST',
                data: window.todoTextItem.value
              })
          }}
          >Add Item</button>
        </h2>
        <ol>
        {state.items.map((item, index) => (
          <li key={index}>
            <label>
              <input 
                type="checkbox"
                checked={item.done}
                onChange={()=>{
                    dispatch({
                    type: 'ITEM_STATUS_CHANGE',
                    index: index,
                  })
                }}
              /> 
              <span className={item.done ? "done" : ""}>{item.text}</span>
            </label>
          </li>
        ))}
        </ol>
      </div>
    );
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))


body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}