W reakcyjnym projekcie przyciski radiowe zaciągają się daty i dni kalendarza. Moim zamiarem jest zmienić kolor tła tych przycisków radiowych, a także utrzymuje go. Nie powinien zniknąć po kliknięciu na ekran.

Poniżej znajduje się kod odniesienia:

{newDate.map((data, i) => (
          <ButtonGroup toggle style={{ width: "100%" }}>
            <GridListTile style={gridListStylePhoto}>
              <h5>{currday(data.getDay())}</h5>
              <ToggleButton
                key={i}
                type="radio"
                active="true"
                variant="light"
                name="radio"
                value={currday(data.getDay()) + " " + data.getDate()}
                checked={radioValue === data.getDate()}
                onChange={(e) => {
                  handleChange(e);
                }}
              >
                <br />
                {data.getDate()}
              </ToggleButton>
            </GridListTile>
          </ButtonGroup>
        ))}

Poniżej znajduje się odniesienie do stylizacji:

input[type="checkbox"],
input[type="radio"] {
  display: none;
}
.btn-light {
  background-color: transparent;
  border: transparent;
}

.btn-light:checked {
  background-color: red // Here is color doesn't change
}

Co można zrobić, aby zmienić kolor tła nad przycisków radiowych?

Proszę odnieść się do poniższego linku Codesandbox.

Codesandbox Link: https://codesandbox.io/s/material-demo-forked-hcbxl.

0
Pranav 14 marzec 2021, 12:18

1 odpowiedź

Najlepsza odpowiedź

Możesz przełączać klasę dla każdego przycisku radiowego za pomocą istniejącej zdarzenia Onchange.

const handleChange = (e) => {
    const newData = e.target.value;
    var elems = document.querySelectorAll(".toggleButtonNew.active");
    [].forEach.call(elems, function (el) {
      el.classList.remove("active");
    });
    e.target.closest("label").classList.toggle("active");
    setRadioValue(newData);
};

I dodaj żądane style do tej klasy

.active {
    background-color: red !important;
}
1
nadz 14 marzec 2021, 19:21