javascript - 如何更改目标跨度 onClick

Question

我希望在 React 中的跨度内容 onClick 上出现一条直线。已尝试创建一个状态并将其关联到 li。但是 onclick，它会影响所有的 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;

Answer 1

@eramit2010 的回答是有道理的，但我正在扩展它以满足这样的要求，即当单击待办事项(即跨度)时显示 line-through 并且当单击删除按钮时只需删除待办事项项目。

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

state ={
  clickedTodo: []
}

您应该在要显示 line-through 的 span 上有单独的点击事件，

<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>

在这里，我应用了 CSS 来在点击时使 span line-through。

您的lineThrought 方法应该是，

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]})
  }
}

Demo