如何更改目标跨度 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()&nbsp;&nbsp;{ $(this).css('color','red');&nbsp;});否则，您必须使用基于唯一 id 的动态状态，当有人点击事件时，然后使用该 id 作为状态并更改那些 li 颜色。