如何在 React 中的切换开关组件内添加文本？

Question

如何在 ReactJS 的 Switch 组件中添加文本？我正在尝试在开关组件内添加文本EN。PT

我没有使用任何库，我只使用 css 构建了组件，因为我需要它进行特定的自定义，所以我发现使用 css 更容易。

我把我的项目放入codesandbox

import React from "react";
import "./switch.css";

const Switch = ({ isOn, handleToggle, onColor }) => {
  return (
    <>
      <input
        checked={isOn}
        onChange={handleToggle}
        className="react-switch-checkbox"
        id={`react-switch-new`}
        type="checkbox"
      />
      <label
        style={{ background: isOn && onColor }}
        className="react-switch-label"
        htmlFor={`react-switch-new`}
      >
        <span className={`react-switch-button`} />
      </label>
    </>
  );
};

export default Switch;

.react-switch-checkbox {
  height: 0;
  width: 0;
  visibility: hidden;
}

.react-switch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  width: 100px;
  height: 50px;
  background: #fff;
  position: relative;
  transition: background-color 0.2s;
}

.react-switch-label .react-switch-button {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 45px;
  height: 45px;
  transition: 0.2s;
  background: #000;
  box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);
}

.react-switch-checkbox:checked + .react-switch-label .react-switch-button {
  left: calc(100% - 2px);
  transform: translateX(-100%);
}

.react-switch-label:active .react-switch-button {
  width: 60px;
}

非常感谢您的帮助！

Answer 1

看看我的沙盒分支。首先，我将 移入<input>，<label>因此它不需要id/htmlFor结构，一旦使用多个开关，该结构就会因重复的 id 而中断。

文本span现在位于它们自己的div内部label。它们各自具有 50% 的宽度，分别与左边缘和右边缘对齐，并使用 Flexbox 将其内容居中。

根据复选框任一状态下白色区域的宽度，您可能需要更改跨度的宽度以使文本正确居中。此外，标签文本可以移动到属性中以供重用。