onClick удалить границы и при следующем нажатии добавить их снова CSS, Preact

Question

Здравствуйте, используя таблицу вроде этого

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

как мне сделать триггер onClick, который удаляет границы при первом щелчке и при втором щелчке, добавляет их обратно, но это должно происходить только в строке, по которой щелкают, и не влияет на другую. Я попытался создать условную CSS для первого и последнего <td>, но это затронуло каждую границу, но я хочу повлиять только на клик

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

Answer 2

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 требует изменения мышления от традиционной веб-разработки. Пожалуйста, найдите время, чтобы прочитать этот отличный пост от команды React.

Answer 3

Один из способов - проверить родительский элемент <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);".