#reactjs #typescript #radio-button #radio #radio-group
Вопрос:
У меня есть пользовательский компонент переключателей, и я хотел бы их как-то сгруппировать. Выбор одного отменяет выбор другого, я должен определить выбор одного и отменить выбор другого, поэтому вопрос в том, где я это делаю? Это должно быть где-то сделано, но механика всегда одна и та же. Есть какие-нибудь рекомендации?
Вот как выглядит мой компонент:
const StyledRadio = styled.divlt;RadioPropsgt;` display: flex; background: ${(p) =gt; !p.checked ? "transparent" : "radial-gradient(#34515E 0%, #34515E 50%, transparent 50%, transparent)"}; border-radius: 50%; border: ${(p) =gt; `2px solid ${theme.color.secondary}`}; height: ${(p) =gt; `${radioSizes[p.size]}px`}; margin-right: 5px; opacity: ${(p) =gt; (p.disabled ? 0.5 : 1)}; width: ${(p) =gt; `${radioSizes[p.size]}px`}; amp;:hover { cursor: pointer; background: radial-gradient( circle, #34515e 0%, #34515e 50%, transparent 50%, transparent ); transform: scale (1.02); display: block; } amp;:active { transform: scale(1.1); } `; const RadioLabel = styled.labellt;{ size: string }gt;` color: ${theme.color.secondary}; cursor: pointer; display: flex; flex-direction: row-reverse; font-size: ${theme.font.size.small}; `; type RadioProps = { checked?: boolean; children?: any; disabled?: boolean; label?: string; onClick?: (value?: any) =gt; void; size?: RadioSize; value?: any; }; export const Radio: FClt;RadioPropsgt; = ({ disabled = false, onClick, children, checked, label = "", value, size = "small", ...rest }) =gt; { return ( lt;RadioGroup disabled = {!!disabled} onClick = {() =gt; (!disabled amp;amp; onClick ? onClick(value) : null)} gt; lt;StyledRadio {...rest} disabled = {disabled} size = {size} checked = {checked} /gt; lt;RadioLabel size={size}gt;{label}lt;/RadioLabelgt; lt;/RadioGroupgt; ); };