单击React-redux中的复选框时在文字上加上划线

Posted 2021-03-19

您好，我在React Redux中制作了一个Todo应用程序，并希望在单击复选框时使范围内具有className“ 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

谢谢！

答案

我设法获得帮助并解决了这样的问题：

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

然后，我将.checked或.unchecked定位为CSS中的代码。

感谢您的帮助！