onClick 删除边框并在下一次单击时再次添加它们 CSS,Preact

Question

你好，使用 table 有点像这样

我如何创建一个触发器 onClick，在第一次点击时删除边框，在第二次点击时将边框添加回去，但这应该只发生在被点击的行上，而不影响其他行。我试图在第一个和最后一个 <td> 上设置条件 css，但这会影响每个边框，但我只想影响点击的边框

Answer 1

一种方法是检查 <td> 元素的父元素和 add/remove 自定义 class，如下所示：

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);"。

Answer 2

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()

Answer 3

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

使用 React 的状态设置和取消设置所选 class。

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。

onClick 删除边框并在下一次单击时再次添加它们 CSS,Preact

onClick remove borders and on next click add them again CSS,Preact

html

javascript

css

reactjs

preact