Как упростить JavaScript / React

Question

Я хочу упростить следующий код:
(Как видите, у меня много document.getElementById)

clickText() {
  document.getElementById("choiceInput").style.display = "none";
  document.getElementById("dateInput").style.display = "none";
  document.getElementById("textInput").style.display = "block";
  document.getElementById('buttonFont').classList.remove('buttonUnselectAfterClick');
  document.getElementById('buttonFont').classList.add('buttonSelectAfterClick');
  document.getElementById('buttonCalendar').classList.remove('buttonSelectAfterClick');
  document.getElementById('buttonCalendar').classList.add('buttonUnselectAfterClick');
  document.getElementById('buttonBoolean').classList.remove('buttonSelectAfterClick');
  document.getElementById('buttonBoolean').classList.add('buttonUnselectAfterClick');
}

Кроме того, я использую responsejs.

Answer 1

Вы можете использовать Map, Set и for ... of loop, чтобы немного упростить код, сгруппировав их, и библиотека и инфраструктура не требуются:

const displayList = new Map([['choiceInput', 'none'], ['dateInput', 'none'], ['textInput', 'block']]);
const eventList = new Set(['buttonFont', 'buttonCalendar', 'buttonBoolean']);

clickText() {
  // For display attr
  for([key, val] of displayList) {
     document.getElementById(key).style.display = val;
  }

  // For events
  for(item of eventList) {
   document.getElementById(item).classList.remove('buttonUnselectAfterClick');
document.getElementById(item).classList.add('buttonUnselectAfterClick');
  }
}