Javascript 如何更改目标跨距onClick

我希望在单击React时在跨度内容上显示一行。尝试创建一个状态并将其与li关联。但是一旦单击，它就会影响所有的li标记。我希望它只更改特定li标记的样式。我是一个新的反应和尝试学习缓慢

import React from 'react';

class Todos extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
      clicked: false
    };

  this.handleClick = this.handleClick.bind(this);
  }

  handleClick(){
    const click = this.state.clicked;
    console.log(click)
    if(click){
      this.setState({
        clicked: false
      })
    }
    else{
      this.setState({
        clicked: true
      })
    }
    console.log(this.state.clicked);
  }

  render() {
    return (
      <ul className="bg-warning p-4 list-group"> 
        {this.props.todos.length ? (
          this.props.todos.map(todo => {
            return (
              <li className="list-group-item" key={todo.id}>
                <span className="pr-2">{todo.content}</span>
                <button onClick={()=>{this.props.deleteTodo(todo.id)}}>Delete</button>
              </li>
            )
          })
        ) : (
          <p className="center">You have no todo's left, yay!</p>
        )}
      </ul>
    )
  }

}

export default Todos;

从“React”导入React；
类Todos扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
单击：false
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
const click=this.state.clicked；
console.log（单击）
如果（单击）{
这是我的国家({
单击：false
})
}
否则{
这是我的国家({
点击：对
})
}
console.log（this.state.clicked）；
}
render（）{
返回(

{this.props.todos.length(
this.props.todos.map（todo=>{
返回(

{todo.content}
{this.props.deleteTodo（todo.id）}>Delete

)
})
) : (
你没有待办事项了，耶
)}

)
}
}
导出默认TODO；

当有人单击li时，它将执行deleteTodo，您说过希望它只更改特定li标记的样式，您可以使用componentdidmount（）函数中的以下代码轻松执行该操作

$（文档）。在（'click'，'your class name'，function（）上
{$（this.css（'color'，'red'）；
});

否则，当有人单击事件时，您必须基于唯一id使用动态状态，然后使用该id作为状态并更改这些li颜色。
您可以将删除的id存储在本地状态中，然后如果该特定id在状态中，您可以使用自定义类

consturctor() {
   this.state = {
       deleted: []
   };
}
render() {
    return (
      <ul className="bg-warning p-4 list-group"> 
        {this.props.todos.length ? (
          this.props.todos.map(todo => {
            return (
              <li className=`list-group-item ${this.state.deleted.includes(todo.id) ? "list-group-item-deleted" : ""}` key={todo.id}>
                <span className="pr-2">{todo.content}</span>
                <button onClick={()=> {
                    this.props.deleteTodo(todo.id);
                    this.setState(prevState => { deleted: [...prevState.deleted, todo.id]);
                }>Delete</button>
              </li>
            )
          })
        ) : (
          <p className="center">You have no todo's left, yay!</p>
        )}
      </ul>
    )
  }

如果您已经将删除的ID存储在redux或其他地方，您可以使用相同的方法。
@eramit2010答案是有意义的，但我将对其进行扩展，以满足以下要求：当单击todo项（即span）时，通过

显示

行，当单击delete按钮时，只需删除todo项

您需要在状态数组中维护单击的待办事项

state ={
  clickedTodo: []
}

您应该在span上有单独的click事件，您希望在其中显示
行至

<span 
   className="pr-2" 
   style={{textDecoration: this.state.clickedTodo.includes(index) ? 'line-through' : 'none', paddingRight: '20px', cursor:'pointer'}} 
   onClick={() => this.lineThrought(todo.id)}
>
   {todo.content}
</span>

当您单击“删除”按钮时，todo项目将从列表中删除，对吗？是，它将删除todo项目在这种情况下，当使用“单击todo项目”（span）时，您希望它通过

成为

行，单击“删除”按钮时，您希望它被删除，对吗？是，我尝试过onclick事件，但当我单击范围时会发生什么？所有待办事项都有一行通过Hi parul，检查我的解决方案并让我知道这是否有帮助。然后，您必须使用基于唯一id的动态状态，当有人单击事件时，然后使用该id作为状态并更改这些属性。我的删除函数位于父组件中，函数为**deleteTodo=（id）=>{const todos=this.state.todos.filter（（todo）=>{return todo.id！==id；}）//filter复制数组，如果返回值为false，则删除与id关联的todo。setState（{todos}）//在上面的函数中，而不是todos:todos，我们直接只提到todos，这意味着相同的}**感谢您的回答，但我唯一的一个小问题是，如果一个todo项有一行通过，并且我添加了一个新的todo，那么新的todo会自动有一行通过。我还意识到，我们需要将
todo.id
存储在数组中，而不是
。我还更新了演示，现在检查它。
<span 
   className="pr-2" 
   style={{textDecoration: this.state.clickedTodo.includes(index) ? 'line-through' : 'none', paddingRight: '20px', cursor:'pointer'}} 
   onClick={() => this.lineThrought(todo.id)}
>
   {todo.content}
</span>

lineThrought = (id) => {
  if(this.state.clickedTodo.includes(id)){
    //To remove line-through
    this.setState({clickedTodo: this.state.clickedTodo.filter(item => item !== id)})
  }else{
    //To add line-through
    this.setState({clickedTodo: [...this.state.clickedTodo, id]})
  }
}