Наложить текст при установке флажка в React-redux

Question

Привет, я создаю приложение todo в реагировать на избыточность и хочу, чтобы текст, который находится внутри диапазона с именем класса «text», был подчеркнут при установке флажка. Я получаю флажок, чтобы быть нажатым, но я не могу получить текст для подчеркивания. Кто-нибудь знает как это сделать? :)

Это возвращение в моем jsx-коде:

return (
    <li>
     <span className="text">
       {props.item.name} 
     </span> 

      <span className="checkboxbuttons">
       <label>    
        <input
          type="checkbox"
          checked={props.item.needsMore}
          onChange={handleCheckboxClick} />
        <span className="fakeCheckbox" />  
      </label>

      <button type="button" onClick={handleRemoveButtonClick}>
        <span role="img" aria-label="x">✖️</span> 
      </button>

      </span>

    </li>
  )

Я пробовал это в css, но оно тоже не работает:

input:checked + .text::after {
  content: '' ;
  text-decoration: line-through;
}

Это ссылка на мой github, если кому-то нужен полный код: https://github.com/camillalof/project-todos

Спасибо!

Answer 1

Мне удалось получить помощь, и я решил проблему следующим образом:

<li className={props.item.needsMore ? 'checked' : 'unchecked'}>
  all jsx code
</li>

Затем я выбрал код в CSS с помощью .checked или .unchecked.

Спасибо за помощь !