Реагировать - Как правильно обрабатывать данные флажок

Question

Пока я изучал React, я начал создавать довольно простой проект.Планировщик путешествия для TFL (Транспорт для Лондона).Приложение получает некоторые параметры, такие как From , To и mode (Tube, Bus, Overground) и отправляет запрос API в TFL API.

Данные режима объединяются с помощью 3 флажков: трубка , шина и надземный .Он должен быть отправлен в виде строки с запятыми между каждым словом.Что-то вроде метро, ​​автобуса, наземного или только автобуса, наземного и т. Д.

Это способ обработки значений флажков:

// Handling checkboxes
    const tubeVal = e.target.elements.tube.checked === true ? "tube" : "";
    const busVal = e.target.elements.bus.checked === true ? "bus" : "";
    const overgroundVal = e.target.elements.overground.checked === true ? "overground" : "";

    let mode = "";
    if (tubeVal && !busVal && !overgroundVal) {
      mode = tubeVal;
    }
    if (!tubeVal && busVal && !overgroundVal) {
      mode = busVal;
    }
    if (!tubeVal && !busVal && overgroundVal) {
      mode = overgroundVal;
    }
    if (tubeVal && busVal && !overgroundVal) {
      mode = tubeVal + "," + busVal;
    }
    if (tubeVal && !busVal && overgroundVal) {
      mode = tubeVal + "," + overgroundVal;
    }
    if (!tubeVal && busVal && overgroundVal) {
      mode = busVal + "," + overgroundVal;
    }
    if (tubeVal && busVal && overgroundVal) {
      mode = tubeVal + "," + busVal + "," + overgroundVal;
    }

Это правильный способ обработки данных флажковв реакции?Мне это не кажется правильным.

Answer 1

Ваш код может быть сильно сокращен до одной строки:

const mode = ['tube', 'bus', 'overground'].filter(key => e.target.elements[key].checked).join(',');

Сначала мы создаем массив с именами элементов, которые вы хотите взять, фильтруйте из тех, которые не являютсяпроверил и скомпонуем наши последние строки со всеми оставшимися именами, объединенными с ,, используя join.

Теперь вы можете сохранить переменную mode в своем состоянии для дальнейшего использования.используйте в своем рендере.

Рабочая демонстрация:

function test(e) {
    const mode = ['tube', 'bus', 'overground'].filter(key => e.target.elements[key].checked).join(',');

    console.log('Mode : ', mode);
    return mode;
}

test({ target: { elements: { 
    tube: { checked: true },
    bus: { checked: false },
    overground: { checked: true }
} } })

test({ target: { elements: { 
    tube: { checked: true },
    bus: { checked: true },
    overground: { checked: true }
} } })

test({ target: { elements: { 
    tube: { checked: true },
    bus: { checked: true },
    overground: { checked: false }
} } })

test({ target: { elements: { 
    tube: { checked: false },
    bus: { checked: false },
    overground: { checked: false }
} } })

Answer 2

Я хотел бы создать массив имен полей, которые я хочу, затем отфильтровать отмеченные и затем добавить их значения в массив и объединить с ,.

Примерно так:

function handleCheckboxes(e) {
  e.preventDefault();
  // Handling checkboxes
  const checkboxes = ['tube', 'bus', 'overground'];
  const nodes = checkboxes.map(name => e.target.elements[name]);
  const values = nodes.filter(node => node.checked).map(node => node.value);
  const mode = values.join(',');
  alert(mode);
}

// for demo
document.querySelector('form').addEventListener('submit', handleCheckboxes);

<form>
  <input type="checkbox" name="tube" value="tube" />
  <input type="checkbox" name="bus" value="bus" />
  <input type="checkbox" name="overground" value="overground" />

  <button type="submit" id="check">check</button>
</form>

---

Специально для React у вас может быть контейнерный компонент, который отображает и контролирует три флажка и их состояние ( проверено или нет ), храня его, он state.Затем вы можете получить эти значения, и снова создать массив из них и объединиться с ,.