onClick 删除边框，然后在下一次单击时再次添加它们 CSS,Preact答案

【问题标题】：onClick remove borders and on next click add them again CSS,PreactonClick 删除边框，然后在下一次单击时再次添加它们 CSS,Preact
【发布时间】：2019-06-26 14:08:54
【问题描述】：

你好，使用类似这样的表格

https://jsfiddle.net/vw19pbfo/24/

我怎样才能创建一个触发器onClick，它在第一次单击时删除边框，在第二次单击时将它们添加回来，但这应该只发生在被单击的行上而不影响另一个。我试图在第一个和最后一个 <td> 上设置一个条件 css，但这会影响每个边框，但我只想影响点击的那个

【问题讨论】：

标签： javascript html css reactjs preact

【解决方案1】：

function removeBorders(e){
  var target = e.target || e.srcElement;
  target.parentElement.classList.toggle('without-border');
};

工作 JSFiddle：https://jsfiddle.net/andrewincontact/su86fhxo/9/

变化：

1) 到 css：

.my-table-row.without-border td {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

2) 转为 html：

onclick=removeBorders(event) instead  onClick=this.removeBorders()

【讨论】：

你知道我应该在 typescript 中使用哪种类型的 event 吗？因为如果我使用函数 removeBorders(e: Event)，它说在 EventTarget 类型上不存在 parentElement。但这正是我所追求的
我成功了！谢谢！如果你知道的话，最后一个问题。有没有办法说我按了第一行所以没有边框，当我按第二行时，我希望第一行再次有边框，第二行没有边框。所以除了最新点击的行之外，所有的边框半径仍然

【解决方案2】：

一种方法是检查 <td> 元素的父元素并添加/删除自定义类，如下所示：

function removeBorders(e) {
    var row = e.parentElement;

    if (row.className.indexOf("has-borders") === -1) {
        row.classList.add("has-borders");
    } else {
        row.classList.remove("has-borders");
    }
};

工作 JSFiddle：https://jsfiddle.net/d380sjrh/

我还将onClick=this.removeBorders() 更改为onclick="removeBorders(this);"。

【讨论】：

有些接近我正在寻找的东西。但我要删除的边框是第一个和最后一个 td 上的圆角边框，因此它们变得像边框：0，然后在第二次单击时返回半径
"somewere close to what I am looking for" - 那么您应该在最初的问题中更加具体。

【解决方案3】：

JSFiddle：https://jsfiddle.net/4qdstec7/

使用 React 的状态来设置和取消设置选定的类。

const Row = ({ children }) => {
  const [selected, setSelected] = useState(false);

  const onClick = e => setSelected(!selected);

  return (
    <tr
      className={selected && 'selected'}
      onClick={onClick}
    >
      {children}
    </tr>
  )
}

使用 React 进行开发需要转变传统 Web 开发的思维方式。请花一些时间阅读来自 React 团队的 excellent post。

【讨论】：