在 React 中单击时划掉(删除线)文本

要在 React 中点击时划掉文本:

  1. 在元素上设置 onClick 属性。
  2. 单击元素时,检查其 text-decoration 属性是否已设置。
  3. 如果设置了属性,则将其删除,否则将其设置为 line-through。
const App = () => {
  const handleClick = event => {
    if (event.target.style.textDecoration) {
      event.target.style.removeProperty('text-decoration');
    } else {
      event.target.style.setProperty('text-decoration', 'line-through');
    }
  };

  return (
    <div>
      <p onClick={handleClick}>Walk the dog</p>

      <br />

      <p onClick={handleClick}>Buy groceries</p>
    </div>
  );
};

export default App;

在 React 中单击时划掉(删除线)文本

我们在段落元素上设置了 onClick,因此每次单击它们时,都会调用 handleClick 函数。

我们首先检查元素的样式对象中是否设置了 textDecoration 属性。

这具有切换段落标记上的删除线样式的效果。

我们可以根据需要在尽可能多的元素上设置 onClick 属性,并使用相同的 handleClick 函数,因为它使用事件对象获取对被单击元素的引用。