FluentUI/React — получить ключ динамического списка флажков при изменении
Используя React 17 с Fluent UI, я пытаюсь создать динамический список флажков. Я создал список флажков, но я изо всех сил пытаюсь получить key каждого флажка, когда они выбраны, чтобы обновить состояние, которое должно быть массивом, содержащим ключи всех выбранных флажков.
Вот тестовая среда кода с минимальным воспроизводимым примером: https://codesandbox.io/s/heuristic-parm-1l3yyc?file=/src/App.tsx
Я открыт для предложений, которые используют другое свойство, отличное от ключа флажка, для хранения значений, но я ограничен использованием Fluent UI.
Вот код, который я использовал для создания списка флажков (это работает). profiles — это созданный массив объектов, единственные свойства, которые используются в этом коде, — это name и token, которые являются строками:
const getProfileCheckboxes = () => {
var profiles = ProjectManager.getProfileList();
const checkboxes = profiles.map(profile =>
<Checkbox
label = {profile.name}
defaultChecked = {true}
onChange = {onChangeProfileCheckbox}
key = {profile.token}
/>
);
return checkboxes;
}
Ниже показано, где у меня возникают проблемы. Я пробовал довольно много вещей для этой функции, включая все ответы на связанные вопросы, которые я нашел в Stack Overflow, но мне не повезло.
selectedProfiles по умолчанию используется массив, содержащий все токены профиля.
const onChangeProfileCheckbox = (ev: any) => {
const value = "key of profile"; // Placeholder
const checked = false; // Placeholder
if (checked) {
selectedProfiles.push(value);
} else {
setSelectedProfiles(prev => prev.filter(x => x !== value));
}
}
Кто-нибудь знает, как я могу получить ключ и проверенные значения в функции onChange()?
Значения checked менее важны, поскольку я могу просто проверить, содержится ли ключ уже в массиве состояний, но я думаю, что было бы чище, если бы я мог получить значение напрямую.
Спасибо за помощь!
@DamianBusz Да, конечно, я начну с этого
@DamianBusz Спасибо за ответ, я создал коды и ящик здесь: codeandbox.io/s/heuristic-parm-1l3yyc?file=/src/App.tsx
буду проверять, спасибо!
Ответы 1
Вы можете получить значение checked непосредственно из события, которое у нас есть из onChange.
Свойство key используется React скрыто и не раскрывается вам. Вы захотите использовать пользовательское свойство и передать эти данные или, как в вашем случае, передать их непосредственно в функцию по щелчку.
вот как должен выглядеть флажок:
<Checkbox
label = {profile.name}
defaultChecked = {true}
onChange = {(ev) => onChangeProfileCheckbox(ev, profile.token)}
key = {profile.token}
/>
А вот как должна выглядеть ваша функция onChange:
const onChangeProfileCheckbox = (ev: ChangeEvent<HTMLInputElement>, token: string) => {
const value = token;
const checked = ev.target.checked;
if (checked) {
selectedProfiles.push(value);
} else {
setSelectedProfiles(prev => prev.filter(x => x !== value));
}
};
вот ссылка на кодыпесочница с результатом
Обратный вызов onChange может передавать ev и checked, поэтому вы также можете передать checked в качестве аргумента напрямую onChange = {(ev, isChecked) => onChangeProfileCheckbox(ev, isChecked, profile.token)}
Это то, о чем я никогда не слышал, круто!
Не могли бы вы предоставить минимальное воспроизведение на codeandbox?