如何在 react 中为行通点击事件添加颜色?(也不会更改字体颜色)

Question

我在这里要做的只是让它在单击时使直通线点击事件变成红色，但我似乎在任何地方都找不到关于如何做到这一点的答案。我尝试了一些方法，但没有任何效果。编辑：我在"无"之后添加了"color"："red"，现在该行是红色的，但它也使我的字体颜色变为红色。

    <ul
    style={{
      textDecoration: this.props.completed ? "line-through" : "none"
    }}
    onClick={this.handleClick}
    >
    {this.props.task}
    </ul>

Answer 1

您可能正在寻找'the right react syntax for multiple conditional styling'。

样式需要对象，然后您可以尝试如下：

<ul
  style={{
    textDecoration: this.props.completed ? "line-through" : "none",
    color: this.props.completed ? "red" : "black"
  }}
  onClick={this.handleClick}
>
{this.props.task}
</ul>

您应该阅读此文档 - 更好的解决方案是定义css类"任务完成"(红色，直行，斜体等(并有条件地分配此类。它可以像在文档中或其他一些方式一样(通过类名(完成，例如

<ul className={`task-item ${this.props.completed ? " task-completed" : ""}`}
      onClick={this.handleClick}
>
  {this.props.task}
</ul>

或不带三元运算符

className={`task-item ${this.props.completed && "task-completed"}`}

对于更复杂的依赖项，可以使用类名