Автор оригинала: FreeCodeCamp Community Member.
Обработка нескольких флажков в реакции полностью отличается от того, как вы используете регулярные флажки HTML.
Таким образом, в этой статье мы увидим, как работать с несколькими флажками в реакции.
Ты выучишь:
- Как использовать флажок в качестве контролируемого ввода в реакцию
- Как использовать карту массива и уменьшить методы для сложных расчетов
- Как создать массив определенной длины, предварительно заполненной конкретным значением
и многое другое.
Эта статья является частью моего Овладение Redux курс. Вот a Предварительный просмотр приложения Мы будем строить в курсе.
Так что давайте начнем.
Как работать с одним флажком
Давайте начнем с одной функциональности 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
);
Массив Уменьшить Метод получает четыре параметра, из которых мы используем только три: сумма , CurrentState и индекс Отказ Вы можете использовать разные имена, если хотите, поскольку они просто параметры.
Мы также проезжаем 0 как начальное значение, которое также известно как Аккумулятор Значение для сумма параметр.
Затем внутри функции уменьшения мы проверяем, если текущее значение проверить Массив – это правда или нет.
Если это правда , это означает, что флажок проверяется, поэтому мы добавляем значение соответствующего Цена Использование сумма + начинки [индекс] .price Отказ
Если проверить Значение массива это ложь , тогда мы не добавляем свою цену, но просто возвращая расчетное предыдущее значение сумма Отказ
Затем мы устанавливаем это TotalPrice ценность для Всего состояние, используя Набор (TotalPrice)
Таким образом, мы правильно сможем рассчитать общую цену для выбранных начинков, как вы можете увидеть ниже.
Вот a Предварительный просмотр Ссылка Из вышеуказанного кода Sandbox Demo, чтобы попробовать для себя.
Спасибо за прочтение!
Большинство разработчиков борются с пониманием того, как Redux работает. Но каждый разработчик реагирования должен знать о том, как работать с Redux, как проекты отрасли в основном используют Redux для управления более крупными проектами.
Итак, чтобы сделать это легко для вас, я запустил Овладение Redux курс.
В этом курсе вы узнаете Redux от абсолютного начала, и вы также построите полную Приложение для заказа на еду С нуля с помощью redux.
Нажмите на изображение ниже, чтобы присоединиться к курсу и получить скидку с скидкой с ограниченным временем, а также получить мою популярную овладение современной JavaScript Book бесплатно.
Хотите остаться в курсе с регулярным контентом в отношении JavaScript, React, Node.js? Следуй за мной на LinkedIn .