React - Как правильно обрабатывать данные флажка
Пока я изучаю React, я начал создавать довольно простой проект. Планировщик поездок для TFL (транспорт для Лондона). Приложение получает некоторые параметры, такие как От, К и Режим (Tube, Bus, Overground), и отправляет запрос API в TFL API.
Данные режима объединяются тремя флажками: трубка, автобус и надземный. Он должен быть отправлен в виде строки с запятыми между каждым словом. Что-то вроде метро, автобуса, надземного или только автобусного, надземного и т. д.
Вот как я обрабатываю значения флажка:
// 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;
}
Это правильный способ обработки данных флажка в React? Мне это кажется неправильным.
Ответы 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. Затем вы можете получить эти значения и снова создать из них массив и присоединиться к нему с помощью ,.
Ваш код можно сильно сократить до одной строки:
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.info('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 }
} } })Ну, вас ничто не заставляет, это полностью зависит от того, чего вы хотите с его помощью достичь. Поскольку вы используете магазин избыточности, вы можете поместить его туда.
Боже мой! Как это круто? Спасибо @Treycos. Мне действительно нужно сохранить режим в состоянии? В этом простом проекте мне не нужно передавать их никакому другому компоненту. Должен ли я сохранить его в магазине?