Как добавить цвет к событию click-line-through в реагировать (без изменения цвета шрифта) - PullRequest
Новая
       30

Как добавить цвет к событию click-line-through в реагировать (без изменения цвета шрифта)

0 голосов
/ 24 апреля 2019

Все, что я пытаюсь сделать здесь, это сделать так, чтобы при щелчке на нем щелкнуло событие сквозного щелчка, но я не могу найти ответ где-нибудь о том, как это сделать.Я попробовал несколько вещей, и ничего не получилось.Редактировать: я добавил «color»: «red» после «none», и теперь линия красная, но она также изменила цвет моего шрифта на красный. 

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

1 Ответ

0 голосов
/ 24 апреля 2019

Вы, наверное, ищете '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 'задача-завершена' (красный, штриховой, курсив и т. Д.) И назначить этот класс условно. Это можно сделать (с помощью className), как в документации или несколькими другими способами, например, 

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

или без троичного оператора 

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

Для более сложных зависимостей вы можете использовать Имена классов

...