Javascript 在reactjs中进行划线（删除线）

我开始学习Reactjs，并且我尝试制作我的第一个应用程序（待办事项列表），我希望在单击按钮时获得如何完成已完成任务的帮助

//index.js
import axios from 'axios'
import React, { Component } from 'react';
import logo from './logo.svg';
import loading from './loading.gif'
import './App.css';
import ListItem from './listItem';

class App extends Component {
constructor() {
super();
this.state = {
  newTodo: '',
  isEmpty: false,
  editing: false,
  editingIndex: null,
  nofication :null,
  notifyFlag : false,
  notifyEditFlag :false,
  loading : true,
  finish : false,
  todos: []
 };
  this.apiUrl = 'https://5d87dcecfeddff0014e1568d.mockapi.io'
  this.addTodo = this.addTodo.bind(this);
  this.updateTodo = this.updateTodo.bind(this);
  this.deleteTodo = this.deleteTodo.bind(this);
  this.handleChange = this.handleChange.bind(this);
  // this.generateTodoId = this.generateTodoId.bind(this);
  this.displayNofication = this.displayNofication.bind(this);
  this.doneTodo = this.doneTodo.bind(this);
  }

  async componentDidMount() {
  const response = await axios.get(`${this.apiUrl}/todos`);
  setTimeout(()=>{
  this.setState({
  todos: response.data,
  loading : false
  });
  },1000)
  }

 async doneTodo(item, index){
 console.log(item.name.strike());
 const todo = this.state.todos[index];
 const response = await axios.put(`${this.apiUrl}/todos/${todo.id}`,{ 
 })
 this.setState({
  finish : true,
 })

 }

 handleChange(event) {
 this.setState({
  newTodo: event.target.value
  });
  if (/^[\s]*([a-zA-Z0-9]+[\s]*)*$/.test(event.target.value)) {
  this.setState({
      isEmpty : true
  })
  } else {
  this.setState({
    isEmpty : false
   })
   }
  }

  // generateTodoId() {
  //   const lastTodo = this.state.todos[this.state.todos.length - 1];
  //   if (lastTodo) {
  //     return lastTodo.id + 1;
  //   }

  //   return 1;
  // }

  async addTodo() {
  if(this.state.isEmpty){
// const newTodo = {
//   name: this.state.newTodo,
//   id: this.generateTodoId()
// };

const response = await axios.post(`${this.apiUrl}/todos`, {
  name: this.state.newTodo
});


const todos = this.state.todos;
todos.push(response.data);

this.setState({
  todos: todos,
  newTodo: '',
  isEmpty :false,
  nofication:this.displayNofication(),
  notifyFlag:true
  });
  this.displayNofication("todo added successfuly")
  }
  }

  editTodo(index) {
  const todo = this.state.todos[index];
  this.setState({
  editing: true,
  newTodo: todo.name,
  editingIndex: index,
  notifyEditFlag :true,
  });
  }

  async updateTodo() {
   this.setState({
  loading : true
   })
   const todo = this.state.todos[this.state.editingIndex];

  const response = await axios.put(`${this.apiUrl}/todos/${todo.id}`,{
  name : this.state.newTodo
  })

  // todo.name = this.state.newTodo;

  const todos = this.state.todos;
  todos[this.state.editingIndex] = response.data;
  setTimeout(()=>{
  this.setState({
  todos,
  editing: false,
  editingIndex: null,
  newTodo: '',
  loading : false
   });
  },1000)
  this.displayNofication("todo update successfuly");
  }

  async deleteTodo(index) {
 const todos = this.state.todos;
 const todo = todos[index]
 await axios.delete(`${this.apiUrl}/todos/${todo.id}`)
 delete todos[index];
 this.setState({ 
  todos,
  notifyFlag:false
 });
 this.displayNofication("todo deleted successfuly")
 }

 displayNofication(notify){
 this.setState({
  nofication :notify
  })
 setTimeout(()=>{
  this.setState({
    nofication : null,
    notifyEditFlag:false
  });
   }, 2000)

  }

  render() {
   return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h1 className="App-title">CRUD React</h1>
    </header>
    <div className="container">
      {
       this.state.notifyEditFlag ? this.state.nofication&&<div className="alert mt-3 alert-info"><p>{this.state.nofication}</p></div>:this.state.notifyFlag ? this.state.nofication&&<div className="alert mt-3 alert-success"><p>{this.state.nofication}</p></div>:this.state.nofication&&<div className="alert mt-3 alert-danger"><p>{this.state.nofication}</p></div>
      }
      <input
        type="text"
        name="todo"
        className="my-4 form-control"
        placeholder="Add a new todo"
        onChange={this.handleChange}
        value={this.state.newTodo}
      />
      <button
        onClick={this.state.editing ? this.updateTodo : this.addTodo}
        className="btn-info mb-3 form-control">
        {this.state.editing ? 'Update todo' : 'Add todo'}
      </button>
      {
        this.state.loading&& <img src={loading} alt="loading Gif"/>
      }
      {
        !this.state.editing &&
        <ul className="list-group">
          {this.state.todos.map((item, index) => {
            return <ListItem  
            key={item.id}
            item={item}
            finish={this.state.finish}
            editTodo={()=>{this.editTodo(index);}}
            deleteTodo={()=>{this.deleteTodo(index);}}
            doneTodo={()=>{this.doneTodo(index);}} 
            />
     })}
        </ul>
      }
    </div>
  </div>
  );
   }
   }

  export default App;

//index.js
从“axios”导入axios
从“React”导入React，{Component}；
从“/logo.svg”导入徽标；
从“./loading.gif”导入加载
导入“/App.css”；
从“./ListItem”导入ListItem；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
纽托德：“，
isEmpty:错，
编辑：错，
编辑索引：空，
nofication:null，
notifyFlag:false，
notifyEditFlag:false，
加载：对，
完成：错，
待办事项：[]
};
这个.apiUrl=https://5d87dcecfeddff0014e1568d.mockapi.io'
this.addTodo=this.addTodo.bind（this）；
this.updateTodo=this.updateTodo.bind（this）；
this.deleteTodo=this.deleteTodo.bind（this）；
this.handleChange=this.handleChange.bind（this）；
//this.generateTodoId=this.generateTodoId.bind（this）；
this.displaynocation=this.displaynocation.bind（this）；
this.doneTodo=this.doneTodo.bind（this）；
}
异步组件didmount（）{
const response=wait axios.get（`${this.apirl}/todos`）；
设置超时（（）=>{
这是我的国家({
todos:response.data，
加载：错误
});
},1000)
}
异步doneTodo（项，索引）{
console.log（item.name.strike（））；
const todo=this.state.todos[index]；
const response=wait axios.put（`${this.apirl}/todos/${todo.id}`，{
})
这是我的国家({
完成：对，
})
}
手变（活动）{
这是我的国家({
newTodo:event.target.value
});
如果（/^[\s]*（[a-zA-Z0-9]+[\s]*）*$/.test（event.target.value））{
这是我的国家({
是的
})
}否则{
这是我的国家({
isEmpty:错
})
}
}
//generateTodoId（）{
//const lastTodo=this.state.todos[this.state.todos.length-1]；
//if（lastTodo）{
//返回lastTodo.id+1；
//   }
//返回1；
// }
异步addTodo（）{
if（this.state.isEmpty）{
//常数newTodo={
//名称：this.state.newTodo，
//id:this.generateTodoId（）
// };
const response=wait axios.post（`${this.apirl}/todos`{
名称：this.state.newTodo
});
const todos=this.state.todos；
todos.push（response.data）；
这是我的国家({
待办事项：待办事项，
纽托德：“，
isEmpty:错，
nofication:this.displaynotation（），
notifyFlag:true
});
此.displayNofication（“todo添加成功”）
}
}
EDITODO（索引）{
const todo=this.state.todos[index]；
这是我的国家({
编辑:对,，
新城：todo.name，
编辑索引：索引，
notifyEditFlag:true，
});
}
异步updateTodo（）{
这是我的国家({
加载：正确
})
const todo=this.state.todos[this.state.editingIndex]；
const response=wait axios.put（`${this.apirl}/todos/${todo.id}`{
姓名：this.state.newTodo
})
//todo.name=this.state.newTodo；
const todos=this.state.todos；
todos[this.state.editingIndex]=response.data；
设置超时（（）=>{
这是我的国家({
待办事项，
编辑：错，
编辑索引：空，
纽托德：“，
加载：错误
});
},1000)
此.displayNofication（“todo更新成功”）；
}
异步删除TODO（索引）{
const todos=this.state.todos；
常数todo=todo[索引]
等待axios.delete（`${this.apirl}/todos/${todo.id}`）
删除待办事项[索引]；
这个.setState（{
待办事项，
通知标志：false
});
此.displayNofication（“todo已成功删除”）
}
显示编号（通知）{
这是我的国家({
不规范：通知
})
设置超时（（）=>{
这是我的国家({
nofication:null，
notifyEditFlag:false
});
}, 2000)
}
render（）{
返回(
积垢反应
{
this.state.notifyEditFlag？this.state.nofication&{this.state.nofication}
：this.state.notifyFlag？this.state.nofication&{this.state.nofication}
：this.state.nofication&{this.state.nofication}

}
{this.state.editing？'Update todo'：'Add todo'}
{
this.state.loading&&
}
{
！this.state.editing&&

{this.state.todos.map（（项，索引）=>{
返回{this.editTodo（index）；}
deleteTodo={（）=>{this.deleteTodo（index）；}
doneTodo={（）=>{this.doneTodo（索引）；}
/>
})}

}
);
}
}
导出默认应用程序；

listItem.js

import React from 'react';

 const ListItem = (props) => {
 return <li className="list-group-item">

<button
  className="btn-sm mr-4 btn btn-info"
  onClick={props.editTodo}
>U</button>
{props.finish ?  <strike>{props.item.name}</strike>: `${props.item.name}`}
<button
  className="btn-sm ml-4 btn btn-danger"
  onClick={props.deleteTodo}
>X</button>
<button className="btn-sm ml-4 btn btn-info" onClick={props.doneTodo}>Done!</button>
 </li>;
      };

  export default ListItem;

从“React”导入React；
常量列表项=（道具）=>{
return

U
{props.finish？{props.item.name}:`${props.item.name}}
X
完成！
；
};
导出默认列表项；

---

当我点击按钮完成！它使所有任务都完成了，我只需要单击按钮完成的特定索引（li）标记，这样任何人都可以帮助我处理它

将ToDo的状态存储在

finish

标志中

当ToDo标记为“完成”时，您正在更新

finish

标志

要记住的要点-

对于React组件，只要

属性

或

状态

发生更改，组件将重新渲染

不能在单个布尔标志

finish

中存储n个待办事项的状态

这就是代码中发生的情况：

您可以单击任何待办事项的“完成”

控件转到

doneTodo

，并进行axios PUT调用

之后，状态变量

finish

被更新

由于状态已更新，您的

应用程序

组件将再次呈现

在渲染期间，对于每个

列表项

，将从状态传递一个

finish

值true

因此，每个待办事项都呈现为“已完成”

要解决此问题，您可以选择将状态

finishStatus

作为数组（类似于

todos

），并在单击完成时更新数组索引（还需要将相应的值传递给