如何在反应中为直通点击事件添加颜色？（不改变字体颜色）

【问题标题】：How to add color to a line-through click event within react?(without it changing the font color too)如何在反应中为直通点击事件添加颜色？（不改变字体颜色）
【发布时间】：2019-04-25 04:56:49
【问题描述】：

我在这里尝试做的只是让 line-through click 事件在点击它时变为红色，但我似乎无法在任何地方找到关于如何执行此操作的答案。我尝试了一些东西，但没有任何效果。编辑：我在“none”之后添加了“color”：“red”，现在这条线是红色的，但它也把我的字体颜色变成了红色。

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

【问题讨论】：

CSS strikethrough different color from text?的可能重复
为了将来参考，如果你有这样的问题，你可以谷歌搜索“css change color of line-through”，然后查看 StackOverflow 链接。

标签： javascript reactjs styling

【解决方案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>

您应该阅读this docs - 更好的解决方案是定义 css 类“任务完成”（红色、直通、斜体等）并有条件地分配此类。它可以像在文档中那样（通过类名）或其他一些方式来完成，f.e.

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

或不带三元运算符

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

对于更复杂的依赖关系，您可以使用classnames

【讨论】：