如何简化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');
}

另外，我正在使用reactjs。

Answer 1

您可以使用Map，Set和for ... of循环将它们分组来简化代码，并且不需要库和框架：

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');
  }
}