При работе над проектом React иногда нам нужно отобразить несколько вариантов флажки для пользователя.
Но обработка нескольких флажков в реакции полностью отличается от того, как мы используем нормальные флажки HTML.
Таким образом, в этой статье мы увидим, как работать с несколькими флажками в реакции.
Ты выучишь:
- Как использовать флажок в качестве контролируемого ввода в реакцию
- Как использовать карту массива и уменьшить способ сложных расчетов
- Как создать определенную длину массива предварительно заполненного некоторого конкретного значения
Эта статья является частью моего Овладение Redux. курс. Вот а Предварительный просмотр приложения Мы будем строить в курсе.
Так что давайте начнем.
Как работать с одним флажком
Давайте начнем с одной функциональности CheckBox, прежде чем перейти к нескольким флажкам.
В этой статье я буду использоваться синтаксис реактивных крюков для создания компонента Так что, если вы не знакомы с реактивными крючками, проверьте мой Введение в реактивный крюки статья.
Посмотрите на следующий код:
Select your pizza topping:Paneer
Вот a Код Sandbox Demo Отказ
В приведенном выше Кодексе мы только что объявили один флажок, который аналогичен, как мы объявляем флажок HTML.
Таким образом, мы можем легко проверить и снизить флажок, как показано ниже:
Но Чтобы отобразить на экране, проверяется ли он, или нет, нам нужно преобразовать его в управляемый ввод.
В реакции контролируемый вход – это тот, который управляется состоянием, поэтому входное значение может быть изменено только путем изменения состояния, связанного с этим входом.
Посмотрите на следующий код:
export default function App() {
const [isChecked, setIsChecked] = useState(false);
const handleOnChange = () => {
setIsChecked(!isChecked);
};
return (
Select your pizza topping:
Paneer
Above checkbox is {isChecked ? "checked" : "un-checked"}.
);
}
Вот a Код Sandbox Demo Отказ
В приведенном выше коде мы объявили ischecked Состояние в компоненте с первоначальным значением ложь используя Уместите крюк:
const [isChecked, setIsChecked] = useState(false);
Затем для входного ящика у нас есть два дополнительных реквизита проверено и Onchange нравится:
Всякий раз, когда мы нажимаем на флажок рулиться Функция обработчика будет называться, которая используется для установки значения ischecked государство.
const handleOnChange = () => {
setIsChecked(!isChecked);
};
Поэтому, если флажок проверяется, мы устанавливаем ischecked Значение для ложь И если флажок не проверьте, мы устанавливаем значение для правда Использование Действительно ischecked И это значение, которое мы проходим в флажок ввода для опоры проверено Отказ
Таким образом, флажка ввода становится контролируемым входом, значение которого управляется состоянием.
В реакции всегда рекомендуется использовать контролируемый вход для полей ввода, даже если код выглядит сложно, потому что он гарантирует, что входное изменение происходит внутри только Onchange обработчик.
Состояние ввода не будет изменено каким-либо другим способом, и вы всегда получите правильное и обновленное значение состояния ввода.
Только в редких случаях вы можете использовать React Ref для использования входного сигнала неконтролируемого способа.
Как обрабатывать несколько флажков
Теперь давайте посмотрим на способ обрабатывать несколько флажков.
Посмотрите на Этот код Sandbox Demo Отказ
Здесь мы отображаем список начните и соответствующую цену и основанную на каждом выборе начинки, нам нужно отобразить общую сумму.
Ранее, с одним флажком мы имели только ischecked Состояние и основанное на том, что мы меняли состояние флажков.
Но теперь у нас есть много флажков, поэтому нецелесообразно добавлять несколько Уместите Вызывает для каждого флажок.
Итак, давайте объявляем массив в штате, указав состояние каждого флажок.
Чтобы создать массив, равный длине количества флажков, мы можем использовать массив заполнить Метод такой:
const [checkedState, setCheckedState] = useState(
new Array(toppings.length).fill(false)
);
Здесь мы объявили состояние с начальным значением в качестве массива, заполненного значением ложь Отказ
Так что, если у нас есть 5 начинки, то проверить место Государственный массив будет содержать 5 ложь такие значения, как это:
[false, false, false, false, false]
И как только мы проверим/снимаем флажок, мы изменим соответствующие ложь к истинный и истинный к ложь Отказ
Вот окончательный Код Sandbox Demo Отказ
Полный App.js код выглядит так:
import { useState } from "react";
import { toppings } from "./utils/toppings";
import "./styles.css";
const getFormattedPrice = (price) => `$${price.toFixed(2)}`;
export default function App() {
const [checkedState, setCheckedState] = useState(
new Array(toppings.length).fill(false)
);
const [total, setTotal] = useState(0);
const handleOnChange = (position) => {
const updatedCheckedState = checkedState.map((item, index) =>
index === position ? !item : item
);
setCheckedState(updatedCheckedState);
const totalPrice = updatedCheckedState.reduce(
(sum, currentState, index) => {
if (currentState === true) {
return sum + toppings[index].price;
}
return sum;
},
0
);
setTotal(totalPrice);
};
return (
Select Toppings
{toppings.map(({ name, price }, index) => {
return (
-
handleOnChange(index)}
/>
{getFormattedPrice(price)}
);
})}
-
Total:
{getFormattedPrice(total)}
);
}
Давайте понять, что мы здесь делаем.
Мы объявили флажок ввода, как показано ниже:
handleOnChange(index)} />
Здесь мы добавили проверено атрибут со значением соответствующего правда или ложь от проверкает государство. Таким образом, каждый флажок будет иметь правильное значение их проверенного состояния.
Мы также добавили Onchange обработчик, и мы проезжаем Индекс флажок, который проверяется/не проверяется на рулиться метод.
рулиться Метод обработчика выглядит так:
const handleOnChange = (position) => {
const updatedCheckedState = checkedState.map((item, index) =>
index === position ? !item : item
);
setCheckedState(updatedCheckedState);
const totalPrice = updatedCheckedState.reduce(
(sum, currentState, index) => {
if (currentState === true) {
return sum + toppings[index].price;
}
return sum;
},
0
);
setTotal(totalPrice);
};
Здесь мы сначала связываемся над проверить место Массив с помощью массива карта метод и Если значение прошло позиция Параметр совпадает с текущим Индекс Тогда мы обращаемся к его ценности так что если значение это истинный Тогда он будет преобразован в ложь Использование Действительно пункт и Если значение это ложный Тогда он будет преобразован в правда Отказ
Если Индекс не совпадает с предоставленным позиция параметр, то мы не обратившими его значение Но мы просто возвращая ценность, как есть.
const updatedCheckedState = checkedState.map((item, index) =>
index === position ? !item : item
);
// the above code is the same as the below code
const updatedCheckedState = checkedState.map((item, index) => {
if (index === position) {
return !item;
} else {
return item;
}
});
Я использовал тройной оператор ?: Потому что это делает код короче, но вы можете использовать любой из них.
Если вы не знакомы, как методы массива, такие как карта или Уменьшить Работает, затем проверьте мой Эта статья Отказ
Далее мы устанавливаем проверить место массив на UpdatedCheckedState множество. Это очень важно, потому что если вы не обновляете проверкает Состояние внутри рулиться Обработчик, то вы не сможете проверить/снизить флажок.
Это потому, что мы используем проверить место Значение для флажков, чтобы определить, проверяется ли флажок или нет, так как это управляемый ввод, как показано ниже:
handleOnChange(index)} />
Обратите внимание, что мы создали отдельные UpdatedCheckedState Переменная и мы передаем эту переменную к setcheckedstate функция, и мы используем Уменьшить Метод на UpdatedCheckedState а не на оригинале проверить место множество.
Это потому, что по умолчанию setcheckedstate Функция, используемая для обновления состояния, является асинхронной.
Только потому, что вы назвали setcheckedstate Функция не гарантирует, что вы получите обновленное значение проверить место массив в следующей строке.
Итак, мы создали отдельную переменную и использовали, что в Уменьшить метод.
Проверьте мой Эта статья Если вы не знакомы, как государство работает в реакции.
Затем рассчитать общую цену, мы используем массив Уменьшить Метод:
const totalPrice = updatedCheckedState.reduce(
(sum, currentState, index) => {
if (currentState === true) {
return sum + toppings[index].price;
}
return sum;
},
0
);
Массив Уменьшить Метод получает 4 параметра из которых мы используем только 3, которые являются сумма , CurrentState и Индекс Отказ Вы можете использовать разные имена, если хотите, поскольку они просто параметры.
Мы также проезжаем 0 Как первоначальное значение, также известное как Аккумулятор Значение для сумма параметр.
Затем внутри функции уменьшения мы проверяем, если текущее значение проверить место Массив – это правда или нет.
Если это правда Это означает, что флажок проверяется, поэтому мы добавляем значение соответствующего Цена Использование сумма + начинки [индекс] .price Отказ
Если проверить место Значение массива это ложный Тогда мы не добавляем свою цену, но просто возвращая расчетное предыдущее значение сумма Отказ
Тогда мы устанавливаем это TotalPrice ценность для Всего состояние, используя Vationotal (TotalPrice)
Таким образом, мы правильно сможем рассчитать общую цену для выбранных начинков, как можно увидеть ниже.
Вот a Предварительный просмотр Ссылка Из вышеуказанного кода демонстрация песочницы, чтобы попробовать это самостоятельно.
Спасибо за чтение!
Большинство разработчиков борются с пониманием того, как Redux работает. Но каждый разработчик реагирования должен знать о том, как работать с Redux в качестве отраслевых проектов в основном используют Redux для управления более крупными проектами.
Итак, чтобы сделать это легко для вас, я запустил Овладение Redux курс.
В этом курсе вы узнаете Redux с абсолютного начала, и вы также построите полную Приложение для заказа на еду С нуля с помощью redux.
Нажмите на изображение ниже, чтобы присоединиться к курсу и получите предложение скидки на ограниченное время, а также получить мою популярную овладение современной JavaScript Book бесплатно.
Хотите остаться в курсе с регулярным контентом в отношении JavaScript, React, Node.js? Следуй за мной на LinkedIn .
Оригинал: “https://dev.to/myogeshchavan97/react-tutorial-how-to-work-with-multiple-checkboxes-11an”