Как применить правила типа css к стилизованным компонентам в React

Имея следующий код html/css, который позволяет элементам html вести себя как радиогруппа:

.radios .radio{
    background-color:#c5e043;
    display:inline-block;
    width:20px;
    height:20px;
    cursor:pointer
}

.radios input[type=radio]{
    display:none
}

.radios input[type=radio]:checked + .radio{
    background-color:#241009
}
<div class = "radios">
<div>
    <input type = "radio" name = "rGroup"  id = "r1"  />
    <label class = "radio" for = "r1"></label>
    <input type = "radio" name = "rGroup"  id = "r2" />
    <label class = "radio" for = "r2"></label>
    <input type = "radio" name = "rGroup"  id = "r3" />
    <label class = "radio" for = "r3"></label></div>
</div>

Я хочу написать в React некоторые стилизованные компоненты, которые ведут себя одинаково, но не знаю, как писать стилизованные компоненты input[type=radio] и .radios input[type=radio]:checked + .radio.

Вот код, кодовая песочница здесь. Он показывает элементы, но щелчок не работает, он не меняет выбранный элемент, как в приведенном выше коде.

Что следует изменить?

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

export const XSelectionBoxContainer = styled.div`
  background-color: #c5e043;
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
`;

export const Xlabel = styled.label`
  background-color: #c5e043;
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
`;

export const Xinput = styled.input`
  display: none;
  :checked {
    background-color: #241009;
  }
`;

function App() {
  const options = [
    {
      label: "first",
      value: "first",
      name: "radio-group"
    },
    {
      label: "second",
      value: "second",
      name: "radio-group"
    },
    {
      label: "third",
      value: "third",
      name: "radio-group"
    }
  ];
  return (
    <XSelectionBoxContainer>
      {options.map((option) => {
        return (
          <div key = {option.label}>
            <Xlabel htmlFor = {option.value}></Xlabel>
            <Xinput
              type = "radio"
              name = {option.value}
              value = "1"
              id = {option.value}
            />
          </div>
        );
      })}
    </XSelectionBoxContainer>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно поместить компонент label под элементом input, чтобы вы могли использовать оператор + в css для стилизации элемента метки, если input — это :checked.

Обновленный код ниже:

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

export const XSelectionBoxContainer = styled.div`
  background-color: #c5e043;
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
`;

export const Xlabel = styled.label`
  background-color: #c5e043;
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
`;

export const Xinput = styled.input`
  display: none;
  &:checked { 
    & + label {
      background-color: #241009;
    }
  }
`;

function App() {
  const options = [
    {
      label: "first",
      value: "first",
      name: "radio-group"
    },
    {
      label: "second",
      value: "second",
      name: "radio-group"
    },
    {
      label: "third",
      value: "third",
      name: "radio-group"
    }
  ];
  return (
    <XSelectionBoxContainer>
      {options.map((option) => {
        return (
          <div key = {option.label}>
            
            <Xinput
              type = "radio"
              name = {option.name}
              value = "1"
              id = {option.value}
            />
            <Xlabel htmlFor = {option.value}></Xlabel>
          </div>
        );
      })}
    </XSelectionBoxContainer>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

кажется, что они кликабельны, но не работают как радиогруппа, она должна иметь не более одной активной одновременно, как в примере html+css. вот песочница с вашим ответом: codeandbox.io/s/stoic-mopsa-t1cjzf?file=/src/index.js

Leo Messi 14.02.2023 11:19

@LeoMessi, я обновил код. Xinput имеет атрибут имени, в котором вы передавали {option.value}. Измените его на {option.name}, чтобы сгруппировать.

the.marolie 14.02.2023 11:25

Другие вопросы по теме