更改无线电输入时如何更改标签的样式？

Question

我创建了类名“OccupancyChecked”，因此它将应用于已检查的收音机标签，但由于某些原因我无法使其工作。

这是风格：

const Occupancy = styled.label`
  //more code

  .OccupancyChecked {
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: #7f5cf1;
  }
`;

下面是调用上面className的代码。我试图做的是：只有两个收音机，所以我在第一个收音机上插入了一个 onChange，结果在每个标签的类名中，它应该调用 "Occupancy" 类名，以防收音机是 checked 或空白类名，否则。我相信这个逻辑应该有效，但事实并非如此。我还创建了一个 sandbox 所以我可以显示代码运行.

export default function App() {
  const [occupancyChecked, setOccupancyChecked] = useState(0);

  function changeOccupancyChecked() {
    occupancyChecked === 0 ? setOccupancyChecked(1) : setOccupancyChecked(0);
    return;
  }

  return (
    <div className="App">
      <Occupancy>
        <label
          htmlFor="radioTeacher"
          className={occupancyChecked === 0 ? "OccupancyChecked" : ""}
        >
          <input
            type="radio"
            name="occupancy"
            id="radioTeacher"
            onChange={changeOccupancyChecked}
            checked
          />
          <span>I'm a teacher</span>
        </label>
        <label
          htmlFor="radioStudant"
          className={occupancyChecked === 1 ? "OccupancyChecked" : ""}
        >
          <input type="radio" name="occupancy" id="radioStudant" />
          <span>I'm a studant</span>
        </label>
      </Occupancy>
    </div>
  );
}

如何解决这个问题？在选中的无线电中显示类名 OccupancyChecked。

Answer 1

radioTeacher 中的默认 checked 是主要原因。我已经更新它以便更好地理解。

Working link

import "./styles.css";
import styled from "styled-components";
import { useEffect, useState } from "react";

const Occupancy = styled.label`
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 0.7rem;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;

  label {
    border: 1px solid #6f49ed;
    background: #6f49ed;
    border-radius: 4px;
    padding: 1rem;
    text-transform: uppercase;
    width: 48%;

    input {
    }

    span {
      margin-left: 0.4rem;
    }
  }
  .OccupancyChecked {
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: red;
  }
`;

export default function App() {
  const [occupancyChecked, setOccupancyChecked] = useState(0);

  const changeOccupancyChecked = (val) => {
    console.log("Value to set:", val);
    setOccupancyChecked(val);
    //occupancyChecked === 0 ? setOccupancyChecked(1) : setOccupancyChecked(0);
    //return;
  };

  return (
    <div className="App">
      <Occupancy>
        <label
          htmlFor="radioTeacher"
          className={occupancyChecked === 0 ? "OccupancyChecked" : ""}
        >
          <input
            type="radio"
            name="occupancy"
            id="radioTeacher"
            onChange={() => {
              changeOccupancyChecked(0);
            }}
          />
          <span>I'm a teacher</span>
        </label>
        <label
          htmlFor="radioStudant"
          className={occupancyChecked === 1 ? "OccupancyChecked" : ""}
        >
          <input
            type="radio"
            name="occupancy"
            id="radioStudant"
            onChange={() => {
              changeOccupancyChecked(1);
            }}
          />
          <span>I'm a studant</span>
        </label>
      </Occupancy>
    </div>
  );
}

更改无线电输入时如何更改标签的样式？

How to change label's style when I change radio inputs?

label

radio-button

typescript

reactjs

styled-components