Блог

У меня есть пользовательский компонент переключателей, и я хотел бы их как-то сгруппировать. Выбор одного отменяет выбор другого, я должен определить выбор одного и отменить выбор другого, поэтому вопрос в том, где я это делаю? Это должно быть где-то сделано, но механика всегда одна и та же. Есть какие-нибудь рекомендации?

Вот как выглядит мой компонент:

 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;  ); };