在 React-redux 中单击复选框时覆盖文本答案

【问题标题】：Overline text while clicking checkbox in React-redux在 React-redux 中单击复选框时覆盖文本
【发布时间】：2020-01-21 19:21:57
【问题描述】：

您好，我在 react redux 中制作了一个待办事项应用程序，并希望在单击复选框时将 className 为“text”的 span 内的文本上划线。我得到了要单击的复选框，但我无法让文本上划线。有谁知道这是怎么做到的吗？ :)

这是我的 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

谢谢！

【问题讨论】：

为什么要把它应用到::after 伪元素上？此外，您正在使用 + 兄弟 CSS 运算符，但您的 input 和您的 span.text 是 not 兄弟姐妹
啊哈，我明白了。我对此很陌生。选中复选框时，Witch Css 运算符将是针对 span.text 的正确运算符？

标签： css react-redux

【解决方案1】：

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

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

然后我用 .checked 或 .unchecked 定位 CSS 中的代码。

感谢您的帮助！

【讨论】：