如何更改目标跨度 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

当有人点击 li 时，它会执行 deleteTodo，您说您希望它只更改特定 li 标签的样式，您可以使用 componentdidmount() 函数内部的以下代码轻松执行该操作

$(document).on('click', 'your class name' , function() 

 { $(this).css('color','red');

 });

否则，您必须使用基于唯一 id 的动态状态，当有人点击事件时，然后使用该 id 作为状态并更改那些 li 颜色。